Modify Twitter Bootstrap collapse plugin to keep accordions open

Question

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 accordio

Answer 1

I have forked and updated your fiddle.

just go to .show function, I have written also the comments.

http://jsfiddle.net/2Rnpz/

Answer 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

Answer 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#

Answer 4

The technique for having only one accordion open at a time(that is collapse the rest), is placing both data-parent="#accordion" data-target="#collapseOne" so it looks like this

<a class="accordion-toggle" data-toggle="collapse" href="#"
    data-parent="#accordion" data-target="#collapseOne">
  Item #1
</a>

You can look at it in plunker: http://plnkr.co/edit/56iXtA?p=preview