Bootstrap Collapse - открыть данный фрагмент id

Представьте себе Коллапс Bootstrap с 3 частями

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

Есть ли простой способ заставить плагин открыть данный идентификатор фрагмента HTTP?

Пример http://myproject/url#accordionTwo откроет второй аккордеон

Ответы

Ответ 1

$("#accordionTwo").collapse('show');

Чтобы открыть данный идентификатор фрагмента HTTP, попробуйте следующее:

$(document).ready(function() {
    var anchor = window.location.hash;
    $(".collapse").collapse('hide');
    $(anchor).collapse('show');
});

EDIT:

Как указано в комментариях к бату: будьте осторожны с таргетингом .collapse, потому что этот класс также используется для панели навигации, когда область просмотра xs.

Ответ 2

Эта строка откроет правильный хэш

location.hash && $(location.hash + '.collapse').collapse('show');

Ответ 3

Еще одно решение, немного меньшее и компактное:

$(document).ready(function() {
  var anchor = window.location.hash;
  $(anchor).collapse('toggle');
});

Ответ 4

Для действительно простой и быстрой реализации хэш-маршрутизации вы можете попробовать что-то вроде Routie

routie({
    accordionOne: function() {
        $('#accordionOne').collapse('show');
    },
    accordionTwo: function() {
        $('#accordionTwo').collapse('show');
    },
    accordionThree: function() {
        $('#accordionThree').collapse('show');
    }
});