Modify Twitter Bootstrap collapse plugin to keep accordions open
Solution 1
I have forked and updated your fiddle.
just go to .show function, I have written also the comments.
Solution 2
Actually, you don't need to modify any code. Read the following statement closely from twitterbootstrap site
Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.
So instead of using data-parent='#idofAccordion'
, use data-target='#idofCollapseItem'
.
It should work perfectly.
Here is the demo on plunker
Solution 3
since the question didn't refer to a specific version of Bootstrap, here's a bootstrap 4 solution:
remove the data-parent="#accordion"
from the tags with the data-toggle="collapse"
attribute. It's the example taken from the Collapse documentation with the data-parent=#accordion"
bit taken out.
bootply: https://www.bootply.com/3wV4WbzBtT#
Hugh Jass
Updated on July 22, 2022Comments
-
Hugh Jass almost 2 years
I'm trying to modify the Bootstrap collapse plugin to allow me to specify whether clicking an accordion (to open) should automatically close the other items in the accordion (so more than one item in the accordion can be open at a time)
I want to create a new data attribute on the accordion, something like
data-collapse-type="auto|manual"
The bootstrap jQuery plugins are a bit advanced for my skill level. The most relevant part of what I need to mess with seems to be on line 52,
actives.collapse('hide')
. I don't want that to happen if 'data-collapse-type="manual"' is set (omitting the attribute or settingauto
should keep the default behavior).I've created a jsfiddle where I've been experiementing.
Can anyone help get me on the right track with this?
-
Hugh Jass about 12 yearsThis is prefect. Now that I see the solution, I'm certain I was overthinking it. Thanks for the quick help!
-
liwp over 11 yearsThe jsfiddle doesn't work for me: Item #1 doesn't expand at all, and I can't expand Item #2 and Item #3 at the same time. But I was able to make it work in my own app. Much nicer than hacking bootstrap.js!
-
maxisam over 11 yearsYeah, I was lazy, I only modified the first 1. Anyway, I fixed it now.
-
dacopenhagen over 11 yearsThis demo appears to have dissapeared, could you reload in jsfiddle?
-
maxisam over 11 yearsIt is still there. You can try it again
-
David Jones over 11 yearsDefinitely a better answer. No modification necessary.
-
Kerry Liu almost 11 yearsSurya, you're correct, all you need to do is to remove the data-parent attribute.
-
CheeHow over 10 yearsThis works fine for me as well! +1 for making use of the attribute
data-target
-
Alex over 10 yearsThis is exact opposite to what was asked !
-
Jack Murphy about 10 yearswhile this technically works - just be aware that modifying the core bootstrap js could lead to maintenance issues down the line, and the other answers use a declarative && supported approach to solve the problem.