Bootstrap 3 expand accordion from URL

Question

Using Bootstrap 3, I'm trying to use sub-navigation anchor links (ie, index.php#wnsh) to expand a specified accordion and anchor down the page to the content. I've tried searching for examples but with little luck, likely because my accordion structure is different from the given BS3 example. Here's my HTML:

UPDATE:

Made a few updates to the code, but it still isn't opening the accordion specified by the hash. Any further thoughts?

            <div id="accordion" class="accordion-group">                
                <div class="panel">
                    <h4 id="cs" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#cs_c">Child Survival: Boosting Immunity and Managing Diarrhoea</a></h4>
                    <div id="cs_c" class="accordion-collapse collapse in">
                        <p>...</p>
                    </div>

                    <h4 id="chgd" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#chgd_c">Child Health, Growth and Development: Preventing Mental Impairment with Iodine and Iron</a></h4>
                    <div id="chgd_c" class="accordion-collapse collapse">
                        <p>...</p>
                    </div>

                    <h4 id="wmnh" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#wmnh_c">Women’s and Newborn Survival and Health: Iron Supplementation and Food Fortification</a></h4>
                    <div id="wmnh_c" class="accordion-collapse collapse">
                        <p>...</p>
                    </div>
                </div>
            </div>

JS

var elementIdToScroll =  window.location.hash;

if(window.location.hash != ''){
  $("#accordion .in").removeClass("in");
  $(elementIdToScroll).addClass("in");
   $('html,body').animate({scrollTop: $(elementIdToScroll).offset().top},'slow');
}

Thanks in advance. Any help would be appreciated.

Solution 1

Tested and working in Bootstrap 3.3.5.

<script type="text/javascript">
$(document).ready(function () {
    if(location.hash != null && location.hash != ""){
        $('.collapse').removeClass('in');
        $(location.hash + '.collapse').collapse('show');
    }
});
</script>

Solution 2

I encountered the same problem just few minutes ago. The solution appears to be straight forward - you need to parse an URL and add class in to the matchable accordion, using its id:

// Opening accordion based on URL
var url = document.location.toString();
if ( url.match('#') ) {
    $('#'+url.split('#')[1]).addClass('in');
}

Tested and working in Bootstrap 3.1.1.

Solution 3

With Bootstrap 4.4, just adding this single line to my JS code (inside a document ready clause) seems to do the trick:

if(location.hash != null && location.hash != ""){$(location.hash + '.collapse').collapse('show');}

Solution 4

I'm using this in Yii2 with the Collapse widget. Assign an id to your panels.
If you have plain html you can just add an id to your a-tag and update the selector.

$(function(){
    var hash = document.location.hash;
    if (hash) {
        $(hash).find('a').click();
    }
});

View more solutions

Comments

[dumP]

That helps me, but i would add this: var url = document.location.toString(); if ( url.match('#') ) { $('#'+url.split('#')[1]).collapse('show'); } To get the javascript effect.

[Lazarus]

Any particular reason we aren't using window.location.hash?

[bart]

@dumP What do you mean by "to get the javascript effect". What effect?

[Eric Steinborn]

@dumP I edited the answer to include your bootstrap-way of doing this. (the preferred method IMO)

[Jishnu V S]

this works fine