Abrir acordeón bootstrap basado en URL por medio del atributo ID

publicado por: Anonymous

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

solución

Aquí esta la solución, muy sencilla pero se adapta a esto:

Javascript / Jquery:

var url = window.location.pathname;
url = url.substr(1); 

$('a[href="'+url+'"]').parents('.panel-collapse').addClass('in'); 
  1. Obtener la url con window.location.pathname ejemplo: “/diseno-de-un-sitio-web.php”
  2. Quitarle el primer caracter “/” la diagonal a la url con substr
  3. Buscar el tag a que tenga como url la cadena que le estamos pasando, despues, buscar a su padre con la clase .panel-collapse para posteriormente agregarle la clase .in

Su código quedaría así:

$(document).ready(function () {
    var url = window.location.pathname;
    url = url.substr(1); 

    $("#accordion .collapse").removeClass('in');
    $('a[href="'+url+'"]').parents('.panel-collapse').addClass('in'); 
});

Saludos, espero sea de mucha ayuda!

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *