Search code examples
javascripthtmltwitter-bootstrapfragment-identifier

Bootstrap Collapse - open the given id fragment


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


Solution

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