Menu
Imagine a Bootstrap collapse with 3 parts
<div class="panel-group" id="accordion">
...
<div id="accordionOne" class="panel-heading"></div>
...
<div id="accordionTwo" class="panel-heading"></div>
...
<div id="accordionThree" class="panel-heading"></div>
</div>
Is there a simple way to make the plugin open the given HTTP fragment identifier ?
Example http://myproject/url#accordionTwo would open the second accordion
319
Just add data-toggle="collapse" and a data-target to the element to automatically assign control of one or more collapsible elements. 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 show . To add accordion-like group management to a collapsible area, add the data attribute data-parent="#selector" .
How it works. The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the height from it's current value to 0 .
open accordian > at right side go to accordian seting > scrol down to Expand/Collapse Accordion Option On Page Load > choose Hide/close All Accordion.. thanks.
$("#accordionTwo").collapse('show');
To open the given HTTP fragment identifier, try this:
$(document).ready(function() {
var anchor = window.location.hash;
$(".collapse").collapse('hide');
$(anchor).collapse('show');
});
EDIT:
As pointed by bart in the comments:
be careful with targeting .collapse because this class is also used for the navigation bar when the viewport is xs.
116
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
