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 .