Twitter Bootstrap Acordeón: preservar el estado luego de refrescar la página o navegar de regreso.

Cuando usas Bootstrap y usas el componente llamado “Acordeón” (accordion en inglés) si en el panel pones enlaces a otras páginas y luego regresas, el acordeón (acordión para los amigos) no recuerda qué panel estaba “expandido” o en dónde te quedaste, simplemente carga como si fuera la primera vez que lo vas a usar.

En el sitio web de StackOverflow hay varias respuestas:

http://stackoverflow.com/questions/12733238/retain-twitter-bootstrap-collapse-state-on-page-refresh-navigation

La que me parece la mejor en mi caso es la de Ravimallya. Funciona con Bootstrap versión 3.x.x.

La idea de la solución es guardar en una “cookie” el ID del elemento que quieres que permanezca abierto cuando regreses de navegar o porque refrescaste la página.

El script en JavaScript y jQuery hace lo siguiente:

  1. Cuando la página está lista (ready) se busca el cookie “activeAccordionGroup” y si lo encuentra hace una búsqueda del ID que está grabado en el cookie y le quita a todos los paneles la clase “in” y al panel con el ID del cookie le agrega la clase “in”.
  2. Cuando le damos clic a un panel para expandirlo se produce un evento “shown.bs.collapse” y en ese evento grabamos en la cookie el ID del panel que tenga la clase “.in”.
  3. Cuando se contrae o se cierra un panel se produce un evento “hidden.bs.collapse” y en ese evento borramos la cookie.

HTML.

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Collapsible Group
                    Item #1 </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
                ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food
                truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put
                a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim
                keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
                raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
                labore sustainable VHS.
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Collapsible Group
                    Item #2 </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
                ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food
                truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put
                a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim
                keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
                raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
                labore sustainable VHS.
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Collapsible
                    Group Item #3 </a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
                ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food
                truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put
                a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim
                keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
                raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
                labore sustainable VHS.
            </div>
        </div>
    </div>
</div>

JavaScript.

$(document).ready(function () {
        //when a group is shown, save it as the active accordion group
        $("#accordion").on('shown.bs.collapse', function () {
            var active = $("#accordion .in").attr('id');
            $.cookie('activeAccordionGroup', active);
          //  alert(active);
        });
        $("#accordion").on('hidden.bs.collapse', function () {
            $.removeCookie('activeAccordionGroup');
        });
        var last = $.cookie('activeAccordionGroup');
        if (last != null) {
            //remove default collapse settings
            $("#accordion .panel-collapse").removeClass('in');
            //show the account_last visible group
            $("#" + last).addClass("in");
        }
    });

Pero eso no es todo…

Tienes que usar un plugin jQuery llamado jquery-cookie creado por carhartl. Permite manipular cookies de esta manera:

$.cookie('nombre-cookie', valor);
$.removeCookie('nombre-cookie');

Descárgalo aquí:
https://github.com/carhartl/jquery-cookie

Desempaquetar el Zip y buscar el archivo jquery.cookie.js y copiarlo en tu proyecto.

Tienes que incluirlo en tu HTML así:

<script src="/path/to/jquery.cookie.js"></script>

La línea va después de la de jQuery por si acaso, no al revés.

No hagas referencia al archivo en GitHub porque es el archivo es entregado con el MIME text/plain y como tal es bloqueado en Internet Explorer en Windows 7 (porque tiene el MIME incorrecto).

En conclusión: GitHub no es un CDN.

<script src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script>

No usar la línea de arriba, no funciona.

Un pensamiento en “Twitter Bootstrap Acordeón: preservar el estado luego de refrescar la página o navegar de regreso.”

  1. Hola, necesito poner 4 acordeones, ya los he puesto, pero solamente me funciona de forma correcta el primero de ellos, los otros 3 cumplen con la función, Qué y cómo debo hacer? Me darías una ayuda? Gracias

    Me gusta

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s