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:
- 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».
- 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».
- 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.
A veces cuando descargas un ISO de Windows o similar requieres calcular el hash SHA1 para ver que concuerde con el archivo que has descargado. La idea es validar que el archivo descargado no esté corrupto y puedas utilizarlo.
Blog en Español 