Modify Twitter Plugstrap to Keep Accordions Open

Question

I'm trying to modify the Bootstrap collapse plugin so that I can specify whether to automatically click on the accordion (to open) to automatically close other elements in the accordion (so that several elements in the accordion can be opened at the same time)

I want to create a new data attribute on the accordion, something like data-collapse-type="auto|manual"

The jQuery bootstrap plugins are a bit advanced for my skill level. The most important part of what I need to chat seems to be on line 52, actives.collapse('hide') . I do not want this to happen if the parameter "data-collapse-type =" manual "is set (the exception of the attribute or parameter auto should support the default behavior).

I created jsfiddle where I experimented .

Can someone help me on the right track?

Answer 1

I forked and updated your fiddle.

just go to the .show function, I also wrote comments.

http://jsfiddle.net/2Rnpz/

Answer 2

Actually, you do not need to change any code . Read the following report carefully from twitterbootstrap

Just add data-toggle = "collapse" and the data object to the element to automatically assign control to the dumped element. The target data attribute accepts a css selector to apply collapse. Be sure to add class collapse to the folded element. If you want to open it by default, add an additional class.

So instead of using data-parent='#idofAccordion' use data-target='#idofCollapseItem' .

It should work fine.

Here is a demon on plunker

Answer 3

since the question is not specific to Bootstrap version, here is bootstrap 4 solution: remove data-parent="#accordion" from tags with attribute data-toggle="collapse" . This is an example taken from the Collapse documentation with the data-parent=#accordion" bit broken. data-parent=#accordion"

bootply: https://www.bootply.com/3wV4WbzBtT#

Answer 4

The method of opening only one accordion at a time (that is, smoothing the rest) places as data-parent = "# accordion" data-target = "# collapseOne", so it looks like

 <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