Guia de Componentes de Bootstrap

Collapse

Cambie la visibilidad del contenido en su proyecto con algunas clases y nuestros complementos de JavaScript.um.

Cómo funciona

El complemento de colapso de JavaScript se utiliza para mostrar y ocultar contenido. Los botones o anclajes se utilizan como activadores que se asignan a elementos específicos que alterna. El colapso de un elemento animará el heightde su valor actual a 0. Dado cómo CSS maneja las animaciones, no puede usarlas paddingen un .collapseelemento. En su lugar, use la clase como un elemento de envoltura independiente.

Ejemplo

Haga clic en los botones de abajo para mostrar y ocultar otro elemento a través de cambios de clase:

• .collapse oculta contenido
• .collapsing se aplica durante las transiciones
• .collapse.show muestra contenido

Generalmente, recomendamos utilizar un botón con el data-targetatributo. Si bien no se recomienda desde un punto de vista semántico, también puede usar un enlace con el hrefatributo (y a role="button"). En ambos casos, data-toggle="collapse"se requiere.

Link with href Button with data-target

Ejemplo de acordeón

Con el componente de tarjeta , puede ampliar el comportamiento de contracción predeterminado para crear un acordeón. Para lograr correctamente el estilo de acordeón, asegúrese de usarlo .accordioncomo envoltorio.