Abrir acordeón bootstrap basado en URL

[akus]

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 categoría.

Muestro el código que tengo actualmente.

HTML:

Código 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>
</div> 

JavaScript:

Código HTML:

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

Dejo el ejemplo ya aplicado en el siguiente sitio:
http://disenowebakus.net/diseno-de-un-sitio-web.php

La intención es que el usuario cuando ingrese por primera vez a una URL el acordeón se abra dependiendo la unidad en la que se encuentre, en el ejemplo anterior, se tendría que abrir "Unidad 2: Gestión del Sitio".


Muchas gracias por su atención y ayuda. Saludos!

[sonystar_17]

tiene que ser algo así :

Código Javascript:

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

que es lo que use hace tiempo atrás para abrirlo , si entro por ejemplo : http://localhost/acordeon.html#collapse3 , acordeón 3 sera el que aparezca abierto.

[akus]

Iniciado por sonystar_17

tiene que ser algo así :

Código Javascript:

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

que es lo que use hace tiempo atrás para abrirlo , si entro por ejemplo : http://localhost/acordeon.html#collapse3 , acordeón 3 sera el que aparezca abierto.

Muchas gracias sonystar_17 lo intenté, pero no funcionó.

[sonystar_17]

recuerda que la dirección no sera así :
http://localhost/acordeon.html#collapse3 , si no sera http://localhost/acordeon.html#unidad3 , o unidad1 , o unidad2 , porque a mi me funciona correctamente.

[akus]

Iniciado por sonystar_17

tiene que ser algo así :

Código Javascript:

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

que es lo que use hace tiempo atrás para abrirlo , si entro por ejemplo : http://localhost/acordeon.html#collapse3 , acordeón 3 sera el que aparezca abierto.

En serio, puedes hacer la prueba directamente con la ayuda del inspector de elementos de Chrome y modificar el código fuente para comprobarlo.

Aún así muchas gracias por tu atención y tiempo sonystar_17.