Cómo crear un acordeón usando Bootstrap 5
Lea el artículo a continuación para aprender cómo crear un acordeón usando Bootstrap 5.
Cómo crear un acordeón usando Bootstrap 5
En el siguiente ejemplo, vamos a demostrar cómo puede crear un acordeón usando Bootstrap 5.
Html
El primer paso para hacer un acordeón es hacer un contenedor Div de los padres y asignarlo una identificación. Aquí lo hemos asignado una identificación etiquetada como "acordeón". El propósito de este contenedor DIV principal es ocultar todos los demás elementos plegables cuando se muestran uno de los elementos plegables.
Html
Hogar
Algún párrafo.
En aras de este ejemplo, utilizaremos el componente de la tarjeta para generar un acordeón. Por lo tanto, en el código anterior, estamos haciendo una tarjeta asignándola el .tarjeta clase a un contenedor Div. Después, estamos haciendo el encabezado de la tarjeta usando el .cabezal clase y una etiqueta de anclaje que oculta/muestra que el contenido se ha anidado dentro del encabezado y conectado al DIV plegable usando la ID.
Por último, se hizo un DIV plegable usando el .colapsar La clase y el cuerpo de la tarjeta estaban anidados dentro del contenedor plegable. Tenga en cuenta que data-bs-parent = "#id" Hace que todos los otros colapsibles se esconieran debajo del contenedor Div Parent cuando se muestre uno de los colapsables.
Html
Acerca de
Algún párrafo.
Se generó otra tarjeta utilizando la misma técnica que se usa para la primera tarjeta. La única diferencia es que la identificación utilizada para conectar la etiqueta de ancla.
Html
Servicios
Algún párrafo.
El mismo enfoque se usó para hacer otra tarjeta plegable que tenga una identificación diferente que vincule la etiqueta de anclaje con el contenedor Div plegable.
Producción
Se generó un acordeón con éxito.
Nota: Si excluye el atributo Data-BS-Parent, los elementos de acordeón permanecen abiertos mientras se abren otros elementos.
Siguiendo la técnica ilustrada anteriormente, puede generar fácilmente un acordeón utilizando Bootstrap 5.
Conclusión
Para hacer un acordeón, debe hacer un elemento como un contenedor Div Plegable usando el .colapsar Clase y anido Tales elementos plegables dentro de un elemento principal. El artículo anterior utiliza una tarjeta para generar un acordeón. Se generaron un total de tres cartas que tenían un encabezado y un cuerpo. Cada una de las tarjetas estaba vinculada a una etiqueta de anclaje que se usaba para ocultar/mostrar contenido colocado dentro de cada tarjeta plegable. Además, el data-bs-parent = "#id" se usó para ocultar todos los demás colapsibles debajo del elemento principal mientras se muestra uno.