Bootstrap 3 从 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.

Answer 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>

Answer 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.

Answer 3

使用Bootstrap 4.4 ，只需将这一行添加到我的 JS 代码中（在文档就绪子句中）似乎就可以解决问题：

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

Answer 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();
    }
});

Answer 5

Just a response, to Ilia R's. His solution worked great! The only thing, though, was that the panel title style wasn't updating (the .collapsed class needed to be removed from the panel title link), so I tweaked Ilia R's code a tad. Someone probably has a better / cleaner solution, but here's a start.

        $(document).ready(function() {
            var url = document.location.toString();
            if ( url.match('#') ) {
                $('#'+url.split('#')[1]).addClass('in');
                var cPanelBody = $('#'+url.split('#')[1]);
                var cPanelHeading = cPanelBody.prev();
                cPanelHeading.find( ".panel-title a" ).removeClass('collapsed');
            }
        });

Answer 6

For me worked:

    $(document).ready(function() {
        var url = document.location.toString();
        if ( url.match('#') ) {
            var cPanelBody = $('#'+url.split('#')[1]);
            cPanelBody.find(".panel-title a")[0].click();
        }
    });