Modify Twitter Bootstrap collapse plugin to keep accordions open - 【StackMirror】|javascript|jquery|oop|twitter-bootstrap

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 setting auto 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?

2012-04-04 21:43
by Hugh Jass

The good news is that now there is a native AngularJS directive for boostrap's accordion in http://angular-ui.github.com/bootstrap/. Demo here: http://plnkr.co/edit/SPWkMO?p=previe - pkozlowski.opensource 2013-03-05 21:56

Look at this answer: "Just don't use data-parent attributes" - Wietse 2014-11-17 14:28

I have forked and updated your fiddle.

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

http://jsfiddle.net/2Rnpz/

2012-04-04 22:04
by burak altundal

This is prefect. Now that I see the solution, I'm certain I was overthinking it. Thanks for the quick help - Hugh Jass 2012-04-05 04:34

while 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 - Jack Murphy 2014-05-08 16:08

212

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

2012-07-25 21:33
by maxisam

The 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 - liwp 2012-11-12 13:34

Yeah, I was lazy, I only modified the first 1. Anyway, I fixed it now - maxisam 2012-11-12 15:32

I feel like this should be the accepted answer - KJ Tsanaktsidis 2013-01-29 02:56

This demo appears to have dissapeared, could you reload in jsfiddle - dacopenhagen 2013-01-29 16:20

It is still there. You can try it agai - maxisam 2013-01-29 17:05

Definitely a better answer. No modification necessary - David Jones 2013-02-08 23:00

I don't think we have to explicitly mention data-target for this. - Surya 2013-02-17 16:12

Surya, you're correct, all you need to do is to remove the data-parent attribute - Kerry Liu 2013-05-17 17:26

This works fine for me as well! +1 for making use of the attribute data-targetCheeHow 2013-11-08 08:23

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#

2017-08-08 12:31
by vzR

-3

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

2013-07-20 18:46
by mukulu

This is exact opposite to what was asked - Alex 2013-11-13 04:02