Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap Collapse - open the given id fragment

Tags:

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

like image 319
Pierre de LESPINAY Avatar asked Nov 16 '12 08:11

Pierre de LESPINAY


People also ask

How do I collapse Bootstrap?

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.

How do I make accordion open by default in Bootstrap?

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 does collapse work in Bootstrap?

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 .

How do you close one accordion when another opens?

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.


1 Answers

$("#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.

like image 116
fxbt Avatar answered Oct 13 '22 23:10

fxbt