javascript - expanded - collapse bootstrap 4 example

Bootstrap Collapse-abre el fragmento de ID dado

Question

Imagina un colapso Bootstrap con 3 partes.

<div class="panel-group" id="accordion">
...
<div id="accordionOne" class="panel-heading"></div>
...
<div id="accordionTwo" class="panel-heading"></div>
...
<div id="accordionThree" class="panel-heading"></div>
</div>

¿Hay una forma sencilla de hacer que el complemento abra el identificador de fragmento HTTP dado?

Ejemplo http://myproject/url#accordionTwo abriría el segundo acordeón

Answer 1

Esta línea abrirá el hash correcto.

location.hash && $(location.hash + ''.collapse'').collapse(''show'');

Answer 2

Otra solución más, un poco más pequeña y compacta:

$(document).ready(function() {
var anchor = window.location.hash;
$(anchor).collapse(''toggle'');
});

Answer 3

Para un enrutamiento hash realmente simple y rápido, puedes probar algo como Routie

routie({
accordionOne: function() {
$(''#accordionOne'').collapse(''show'');
},
accordionTwo: function() {
$(''#accordionTwo'').collapse(''show'');
},
accordionThree: function() {
$(''#accordionThree'').collapse(''show'');
}
});

Answer 4

$("#accordionTwo").collapse(''show'');

Para abrir el identificador de fragmento HTTP dado, intente esto:

$(document).ready(function() {
var anchor = window.location.hash;
$(".collapse").collapse(''hide'');
$(anchor).collapse(''show'');
});

EDITAR:

Como señaló bart en los comentarios: tenga cuidado con la orientación .collapse porque esta clase también se usa para la barra de navegación cuando la ventana xs es xs .