Foros del Web » Programando para Internet » Jquery »

Abrir acordeón bootstrap basado en URL

Estas en el tema de Abrir acordeón bootstrap basado en URL en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/06/2017, 15:38
 
Fecha de Ingreso: junio-2010
Mensajes: 94
Antigüedad: 7 años, 4 meses
Puntos: 5
Abrir acordeón bootstrap basado en URL

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!
  #2 (permalink)  
Antiguo 14/06/2017, 11:04
 
Fecha de Ingreso: septiembre-2015
Mensajes: 140
Antigüedad: 2 años, 1 mes
Puntos: 13
Respuesta: Abrir acordeón bootstrap basado en URL

tiene que ser algo así :

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2. $(document).ready(function () {
  3.     if(location.hash != null && location.hash != ""){
  4.         $('.collapse').removeClass('in');
  5.         $(location.hash + '.collapse').collapse('show');
  6.     }
  7. });
  8. </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.
  #3 (permalink)  
Antiguo 18/06/2017, 11:13
 
Fecha de Ingreso: junio-2010
Mensajes: 94
Antigüedad: 7 años, 4 meses
Puntos: 5
Respuesta: Abrir acordeón bootstrap basado en URL

Cita:
Iniciado por sonystar_17 Ver Mensaje
tiene que ser algo así :

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2. $(document).ready(function () {
  3.     if(location.hash != null && location.hash != ""){
  4.         $('.collapse').removeClass('in');
  5.         $(location.hash + '.collapse').collapse('show');
  6.     }
  7. });
  8. </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ó.
  #4 (permalink)  
Antiguo 18/06/2017, 11:22
 
Fecha de Ingreso: septiembre-2015
Mensajes: 140
Antigüedad: 2 años, 1 mes
Puntos: 13
Respuesta: Abrir acordeón bootstrap basado en URL

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.
  #5 (permalink)  
Antiguo 19/06/2017, 21:23
 
Fecha de Ingreso: junio-2010
Mensajes: 94
Antigüedad: 7 años, 4 meses
Puntos: 5
Respuesta: Abrir acordeón bootstrap basado en URL

Cita:
Iniciado por sonystar_17 Ver Mensaje
tiene que ser algo así :

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2. $(document).ready(function () {
  3.     if(location.hash != null && location.hash != ""){
  4.         $('.collapse').removeClass('in');
  5.         $(location.hash + '.collapse').collapse('show');
  6.     }
  7. });
  8. </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.



La zona horaria es GMT -6. Ahora son las 15:07.