0
518
Views¿Cómo mantener un elemento de acordeón siempre abierto en Bootstrap 5?
Tengo el primer elemento de acordeón abierto de manera predeterminada, así que lo que quería hacer era tener siempre al menos uno abierto en cualquier momento (para que la imagen al costado mantenga una relación de aspecto decente). De manera predeterminada, puedo cerrarlos todos y cuando abro uno nuevo, todos los demás se cierran.
2 answers
Answer question0
Debe configurar un observador en todos los elementos del acordeón y verificar si alguno de ellos está abierto.
Si no hay ninguno abierto, abra el primero.
$('#accordion-id .collapse').each((i, e) => $(e).on('hidden.bs.collapse', () => { // check if an accordion item is expanded let isExpanded = false; $('#accordion-id [aria-expanded]').each((i, element) => { if ($(element).attr("aria-expanded") === 'true') { isExpanded = true; } }); // show the first accordion item if (!isExpanded) { $('#btn-firs-accordion-id').click(); } }) );0
Encontré una solución para la versión Bootstrap 4 pero ninguna para Bootstrap 5.
Después de un tiempo pude resolver el problema con este código:
<script> const accordions = document.querySelectorAll(".accordion-collapse"); let opening = false; accordions.forEach(function (el) { el.addEventListener("hide.bs.collapse", (event) => { if (!opening) { event.preventDefault(); event.stopPropagation(); } else { opening = false; } }); el.addEventListener("show.bs.collapse", (event) => { opening = true; }); }); </script>No soy un desarrollador js experto, así que sé que no es la solución más elegante, pero al menos resolvió mi problema.