El Bric del acordeón ofrece una forma de dividir y alternar entre ocultar y mostrar grandes cantidades de contenido. Los acordeones constan de varios subelementos, como el Tarjeta Bric y Div contenedor Bric, lo que permite personalizarlos fácilmente y darles estilo de forma independiente.
Para agregar más secciones de acordeón, simplemente seleccione una de las tarjetas (que se encuentra dentro del contenedor div principal de acordeón) a través del árbol de capas y duplíquela usando el atajo de teclado ⌘D.
Estructura
La estructura de un acordeón es un poco más compleja que la mayoría de los demás. Brics encontrado dentro Blocs. Se compone de un Div contenedor Bric que tiene su Tipo establecido en un Contenedor de acordeón y su ID establecido en un valor único, por ejemplo acordeón-17605. Dentro de este contenedor hay múltiples Tarjeta BricsCada tarjeta Bric tiene una Enlace Bric dentro de la sección de encabezado de la tarjeta y un adicional Div contenedor que contiene la sección del cuerpo de la tarjeta.
Comunicación
Las funciones del acordeón Bric se controlan a través del Enlace Bric (que se encuentra dentro de la sección de encabezado de una tarjeta) y el Div contenedor (que contiene la sección del cuerpo de la tarjeta). Ambos elementos tienen atributos de datos personalizados aplicado a ellos con el fin de darles la funcionalidad típica de acordeón y permitirles comunicarse entre sí.
Enlace de acordeón Bric
El enlace es el elemento en el que hace clic para revelar la sección de acordeón. Este artículo tiene una configuración específica que le permite funcionar como parte de un acordeón. Tiene su interacción establecido en ninguna y también tiene varios atributos de datos personalizados, los dos más importantes son los objetivo de datos y aria-controles.
Atributos de datos de enlace
El sistema objetivo de datos El atributo tiene un valor establecido en una referencia única, por ejemplo # accordion-17605-item-1. aria-controles El atributo contiene un valor casi idéntico al objetivo de datos atributo, pero tiene el # al principio eliminado, por ejemplo acordeón-17605-item-1. Estas referencias únicas deben coincidir con las ID del contenedor div correspondiente en el que está anidado el cuerpo de la tarjeta.
Recipiente Div de acordeón
Dentro de cada tarjeta Bric (que se encuentra dentro del contenedor principal del acordeón) hay una adicional Div contenedor que tiene su ID establecido en un valor único, por ejemplo acordeón-17605-item-1. Este valor de ID debe corresponder y coincidir con los atributos de datos personalizados, objetivo de datos y aria-controles Encontrado en el enlace Bric (ubicado en la sección de encabezado de la tarjeta).
Este contenedor div Bric también contiene varios atributos de datos personalizados, siendo el más importante padre de datos. Este valor de este atributo de datos debe coincidir con el ID del recipiente principal de acordeón, por ejemplo # acordeón-17605. Este atributo de datos le dice al navegador con qué contenedor de acordeón está relacionada esta sección.
Si realiza cambios en los atributos de datos del enlace de acordeón objetivo de datos or aria-controles, tenga cuidado de actualizar el ID para el contenedor div relevante (que contiene la sección del cuerpo de la tarjeta) y viceversa.
Para obtener información más detallada sobre cómo funcionan los acordeones, consulte la Documentos de Bootstrap 4.