Me encuentro utilizando el "accordion" de Bootstrap. Lo he combinado con enlaces de navegación jerarquizados por medio de IDs y me gustaría que el acordeón se abriera con base en la URL actual. Tengo actualmente mi código en JS, pero sólo se expande cuando se ha visitado previamente un item perteneciente a la misma unidad.
Me podrían ayudar por favor. Saludos!
HTML:
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#unidad1">
<strong>Unidad 1: ...</strong>
</a>
</div>
<div id="unidad1" class="panel-collapse collapse">
<div class="panel-body">
<nav class="">
<ul>
<li><a href="">item</a></li>
<li><a href="">item</a></li>
...
</ul>
</nav>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#unidad2">
<strong>Unidad 2: ...</strong>
</a>
</div>
<div id="unidad2" class="panel-collapse collapse">
<div class="panel-body">
<nav>
<ul>
<li><a href="">item</a></li>
<li><a href="">item</a></li>
...
</ul>
</nav>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#unidad3">
<strong>Unidad 3: ...</strong>
</a>
</div>
<div id="unidad3" class="panel-collapse collapse">
<div class="panel-body">
<nav>
<ul>
<li><a href="">item</a></li>
<li><a href="">item</a></li>
...
</ul>
</nav>
</div>
</div>
</div>
JavaScript:
<script type="text/javascript">
$(document).ready(function () {
var last = $.cookie('activeAccordionGroup');
if (last != null) {
$("#accordion .collapse").removeClass('in');
$("#" + last).addClass("in");
}
});
$("#accordion").on('hidden.bs.collapse', function () {
$.removeCookie('activeAccordionGroup');
});
$("#accordion").on('shown.bs.collapse', function () {
var active = $("#accordion .in").attr('id');
$.cookie('activeAccordionGroup', active);
});