CODEWITHSUNDEEP
javascriptjqueryooptwitter-bootstrap
Hugh Jass
Hugh Jass

Reputation: 633

Modify Twitter Bootstrap collapse plugin to keep accordions open

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?

Upvotes: 63

Views: 56514

Answers (4)

vzR
vzR

Reputation: 1547

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#

Upvotes: 6

mukulu
mukulu

Reputation: 161

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

Upvotes: -4

maxisam
maxisam

Reputation: 22705

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

Upvotes: 223

burak altundal
burak altundal

Reputation: 712

I have forked and updated your fiddle.

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

http://jsfiddle.net/2Rnpz/

Upvotes: 5

Related Questions