1. Estructura HTML:
- Crea un elemento contenedor con la clase "contenedor" donde colocarás tu contenido plegable.
- Dentro del elemento `contenedor`, agregue un elemento `
- Debajo del botón de alternancia, agregue un elemento `
2. Clases CSS:
- Incluye el archivo CSS Bootstrap en tu página web.
- Agregue las siguientes clases CSS:
- Clase `collapse` al contenido plegable `
- Clase `show` al contenido plegable `
- Clase `colapsada` al botón de alternancia `
3. JavaScript:
- Incluye el archivo JavaScript Bootstrap en tu página web.
- Agregue el siguiente script:
```javascript
// Seleccione el botón de alternancia y los elementos de contenido plegables
const toggleBtn =document.querySelector('.toggle-btn');
const collapsibleContent =document.getElementById('collapseExample');
// Agregar detector de eventos al botón de alternancia
toggleBtn.addEventListener('hacer clic', función() {
// Alternar la clase "mostrar" en el contenido plegable
collapsibleContent.classList.toggle('mostrar');
// Alternar la clase "contraída" en el botón de alternar
toggleBtn.classList.toggle('colapsado');
});
```
Este script manejará la funcionalidad de contraer/expandir cuando se haga clic en el botón de alternancia.
Siguiendo estos pasos, puedes crear fácilmente un elemento plegable usando Bootstrap 5.