Retener Twitter Bootstrap Colapsar el estado en Actualización de página/Navegación

Question

Estoy usando el complemento "colapsar" de Bootstrap para hacer un acordeón para una larga lista de enlaces. La etiqueta de cuerpo de acordeón incluye "colapso", por lo que todos los grupos se contraen cuando se carga la página. Cuando abre un grupo y hace clic en un enlace, lo lleva a una nueva página para ver algunos detalles y luego hace clic en un enlace posterior o en el navegador para regresar a la lista. Lamentablemente, cuando regresas, el acordeón vuelve a su estado colapsado y debes volver a abrir el grupo y encontrar dónde estabas. Anticipo mucho de esta navegación de ida y vuelta y este comportamiento será frustrante.

¿Hay alguna forma de preservar el lugar del usuario y volver a él, o simplemente evitar que la página se vuelva a cargar o que javascript vuelva a dispararse?

Pensé que la solución podría estar en esta línea, pero no estoy seguro. Twitter bootstrap: adding a class to the open accordion title

Answer 1

Puede resolver esto muy fácilmente con una cookie. Hay una gran cantidad de bibliotecas simplificados, como https://github.com/carhartl/jquery-cookie como yo uso en el siguiente ejemplo:

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

añadir el siguiente código a una sección de la escritura (#accordion2 se refiere al ejemplo de arranque Twitter modfied, enumero después)

$(document).ready(function() { 
    var last=$.cookie('activeAccordionGroup'); 
    if (last!=null) { 
     //remove default collapse settings 
     $("#accordion2 .collapse").removeClass('in'); 
     //show the last visible group 
     $("#"+last).collapse("show"); 
    } 
}); 

//when a group is shown, save it as the active accordion group 
$("#accordion2").bind('shown', function() { 
    var active=$("#accordion2 .in").attr('id'); 
    $.cookie('activeAccordionGroup', active) 
}); 

¡Y listo! Aquí una versión modificada del ejemplo en http://twitter.github.com/bootstrap/javascript.html#collapse con hacer clic en enlaces, cuando vuelva - el último grupo de acordeón se muestra abre automáticamente

<div class="accordion" id="accordion2"> 
    <div class="accordion-group"> 
    <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> 
     Collapsible Group Item #1 
     </a> 
    </div> 
    <div id="collapseOne" class="accordion-body collapse in"> 
     <div class="accordion-inner"> 
     Link : <a href="http://google.com">google.com</a> 
     </div> 
    </div> 
    </div> 
    <div class="accordion-group"> 
    <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> 
     Collapsible Group Item #2 
     </a> 
    </div> 
    <div id="collapseTwo" class="accordion-body collapse"> 
     <div class="accordion-inner"> 
     Link : <a href="http://stackoverflow.com">stackoverflow.com</a> 
     </div> 
    </div> 
    </div> 
    <div class="accordion-group"> 
    <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree"> 
     Collapsible Group Item #3 
     </a> 
    </div> 
    <div id="collapseThree" class="accordion-body collapse"> 
     <div class="accordion-inner"> 
     Link : <a href="http://cryptozoologynews.blogspot.com/">cryptozoology news</a> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 2

probé la técnica sugerida por encima y funcionó para mí (más o menos) pero llamar .collapse ("mostrar") parecía romper el comportamiento de alternar acordeón en algunos casos. La apertura del primer panel dejaría el panel abierto previamente en estado abierto. Tengo alrededor de esto con jQuery mediante la adición de la clase "en" su lugar:

$(document).ready(function() { 
    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"); 
    } 
}); 

De lo contrario, gracias davidkonrad me pone en la pista derecha.

Answer 3

Gracias por esto, nos pareció muy útil, pero si usted está usando Bootstrap 3 & última jQuery, esto funciona:

$("#accordion").on('shown.bs.collapse', function() 
{ 
    ... 
}); 

Hope esto ahorra los demás algún tiempo ....

Answer 4

En Bootstrap 3.xx tiene que usar la siguiente secuencia de comandos para guardar el último estado abierto en las cookies.

Formato 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> 

Jquery

$(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"); 
     } 
    }); 

Answer 5

Gracias por esto, funciona. Lo modifiqué un poco para simplemente conservar el estado mostrar/ocultar de un DIV específico (y no específico para mostrar solo un DIV en una lista de DIV).

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script> 

<script language="javascript" type="text/javascript"> 
    function retainDivCollapsedState(nameOfDiv, nameOfHeader) { 
     // when the div is shown, save a cookie with a value of 'true' 
     $("#" + nameOfDiv).on('shown.bs.collapse', function() { 
      $.cookie(nameOfDiv, "true"); // this is a cookie. named the same as the control (poor practice) for brevity 
     }); 
     // when the div is collapsed, remove the same cookie 
     $("#" + nameOfDiv).on('hidden.bs.collapse', function() { 
      $.removeCookie(nameOfDiv); 
     }); 

     // on page load, show or hide the div (and stylized the header) according to the cookie (if it exists) 
     var showDiv = $.cookie(nameOfDiv); 
     if (showDiv != null) { 
      $("#" + nameOfDiv).addClass("in");      // The div to show 
      $("#" + nameOfHeader).removeClass("collapsed");   // The header to stylize as expanded 
     } 
    }; 
</script> 

<script language="javascript" type="text/javascript"> 
    $(document).ready(
     retainDivCollapsedState("divName", "divHeaderName") 
    ); 
</script> 

Answer 6

Otra opción disponible es utilizar el url hash.

$(document).ready(function() { 
    var hash = window.location.hash; 
    if (hash) { 
     $("#accordion .panel-collapse").removeClass('in'); 
     $(hash).addClass('in'); 
    } 

    $('#accordion').on('shown.bs.collapse', function() { 
     var activeId = $("#accordion .in").attr('id'); 
     window.location.hash = activeId; 
    }); 

    $('#accordion').on('hidden.bs.collapse', function() { 
     window.location.hash = ''; 
    }); 
});