Usando Bootstrap 5.1 , tengo algunos botones que ocultan/muestran contenido usando el complemento de colapso
<div class="col m-2"> <button type="btn" class="btn btn-outline-primary m-1" data-bs-toggle="collapse" data-bs-target="#focus_id">Focus </button> </div>Sin embargo, no hay nada que indique al usuario si se presionó un botón o no, quiero que sean botones de alternancia. De acuerdo con la documentación, esto se hace configurando
data-bs-toggle="button"pero ya estoy usando esto para ocultar/mostrar contenido con
data-bs-toggle="collapse"Entonces, ¿cómo hago ambas cosas? Lo intenté.
data-bs-toggle="button,collapse"pero eso no funcionó
Sin embargo, no hay nada que indique al usuario si se ha presionado un botón o no.
Bueno, el hecho de que la sección plegable esté oculta o se muestre debería ser un indicador suficiente.
De todos modos, supongo que dado que los dos componentes comparten el mismo atributo, debe seguir el camino manual y el camino más fácil, al menos desde el punto de vista del mantenimiento, es agregar un eventListener a su sección colapsable:
let collapsibleSection = document.getElementById('mySection'); let toggleButton = document.getElementById('myButton'); collapsibleSection.addEventListener('hidden.bs.collapse', function() { if (toggleButton.classList.contains('my-active-css-class') { toggleButton.classList.add('your-inactive-css-class'); toggleButton.classList.remove('your-active-css-class'); } }); collapsibleSection.addEventListener('shown.bs.collapse', function() { if (toggleButton.classList.contains('my-inactive-css-class') { toggleButton.classList.add('your-active-css-class'); toggleButton.classList.remove('your-inactive-css-class'); } }); Tenga en cuenta que estos dos eventos se activan después de la finalización de la transición. Si desea que su código se active tan pronto como el usuario haga clic en el botón, use los show.bs.collapse y hide.bs.collapse en su lugar Consulte la parte relevante de la documentación ; Sin embargo, tenga en cuenta que las llamadas al método en el componente de transición se ignorarán ( documentos relevantes ).