Menu
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?
916
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.
By default, accordion items expand or collapse by clicking the accordion item header or clicking expand/collapse icon in accordion header. You can also expand or collapse the accordion items through external button click.
To control (show/hide) the collapsible content, add the data-toggle="collapse" attribute to an <a> or a <button> element. Then add the data-target="#id" attribute to connect the button with the collapsible content (<div id="demo">).
When you use the accordion in Bootstrap, the point is to wrap the cards in an element with an individual ID, and then target this element as the data-parent of the collapsibles by referring to the id . Using this simple addition, you can make your content display more interactively.
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
162
I have forked and updated your fiddle.
just go to .show function, I have written also the comments.
http://jsfiddle.net/2Rnpz/
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
