web design
Diseño web, JavaScript
0mayo 6, 2025

Introducción al componente Accordion en Bootstrap

Un acordeón web es un componente que organiza contenido en secciones con un título y un cuerpo. Cada sección puede estar expandida (mostrando el cuerpo) o comprimida (mostrando solo el título), lo que ahorra espacio en la interfaz. Algunas implementaciones permiten solo una sección expandida a la vez, optimizando aún más el espacio, aunque también se pueden configurar para que cada sección se expanda y comprima de forma independiente.

1. Estructura básica e implementación

Los acordeones de Bootstrap permiten mostrar paneles de contenido plegables. A continuación, se detalla la estructura básica y cómo implementar un acordeón simple:

<div class="accordion" id="myAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" 
data-bs-toggle="collapse" data-bs-target="#collapseOne" 
aria-expanded="true" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" 
class="accordion-collapse collapse show" 
aria-labelledby="headingOne" data-bs-parent="#myAccordion">
      <div class="accordion-body">
        This is the content of accordion item #1.  
It is shown by default because it has the 'show' class.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" 
type="button" data-bs-toggle="collapse" 
data-bs-target="#collapseTwo" aria-expanded="false" 
aria-controls="collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" 
aria-labelledby="headingTwo" data-bs-parent="#myAccordion">
      <div class="accordion-body">
        This is the content of accordion item #2. It is hidden by default.
      </div>
    </div>
  </div>
</div>

Explicación:

  • .accordion : Este es el contenedor principal del componente acordeón. El atributo id es importante para garantizar que solo un elemento del acordeón esté abierto a la vez.
  • .accordion -item : esta clase envuelve cada elemento plegable individual.
  • .accordion -header : Contiene el encabezado (el botón) del elemento del acordeón.
  • .accordion -button : este es el botón en el que se puede hacer clic que alterna la visibilidad del contenido plegable.
    • data-bs-toggle=”collapse” : este atributo le dice a Bootstrap que este botón controla un elemento colapsable.
    • data-bs-target=”#collapseTwo” : este atributo especifica el ID del contenedor de contenido plegable que controla este botón.
    • aria-expanded : Indica si el contenido contraíble está expandido. dinamicamente actualizado por el complemento Bootstrap Collapse .
    • aria-controls : especifica el ID del contenido plegable que controla este botón, para accesibilidad.
    • .collapsed : Bootstrap añade esta clase para indicar que el contenido colapsable está inicialmente colapsado . se elimina cuando el contenido es ampliado .
  • .accordion-collapse : este es el contenedor de contenido plegable.
    • id=”collapseTwo” : este ID debe coincidir con el data-bs-target del .accordion-button correspondiente .
    • class=”collapse” : Esta clase oculta el contenido por defecto. Se puede añadir la clase “show” para que sea visible inicialmente.
    • aria-labelledby=”headingTwo” : este atributo proporciona una etiqueta accesible haciendo referencia al ID del encabezado correspondiente.
    • data-bs-parent=”#myAccordion” : Esto es crucial para el comportamiento del acordeón. Indica a Bootstrap que este contenido plegable forma parte del acordeón con el ID “myAccordion”. Esto garantiza que, al expandir un elemento, los demás se contraigas. Si se omite, se pueden abrir varios elementos simultáneamente.
  • .accordion-body : este es un contenedor para el contenido real dentro de la sección plegable.

2. Cómo funciona el complemento Collapse de JavaScript

El complemento Collapse de Bootstrap gestiona la función de mostrar/ocultar el contenido del acordeón. Aquí tienes una explicación simplificada. explicación :

  • Manenjo de eventos : cuando hace clic en un botón .accordion-button , se activa el manejador de eventos del complemento Collapse.
  • Selección de objetivo : el atributo data-bs-target del botón se utiliza para identificar el elemento .accordion-collapse correspondiente .
  • Cambio de estado : el complemento verifica el estado actual del contenido plegable (oculto o mostrado).
  • Animación : El complemento usa transiciones CSS para mostrar u ocultar el contenido con fluidez, añadiendo o eliminando la clase “show” . También actualiza el atributo “aria-expanded” del botón.
  • El atributo data-bs-parent : si el atributo data-bs-parent está presente, el complemento también contrae cualquier otro elemento expandido dentro del mismo acordeón.

3. Personalizar la apariencia con CSS

Puedes personalizar la apariencia de los acordeones con CSS. Aquí tienes algunos ejemplos:

.accordion-button {
  background-color: #f0f0f0; /* Light grey background */
  color: #333; /* Dark text */
  font-weight: bold;
  border-radius: 5px;
}

.accordion-button:hover,
.accordion-button:not(.collapsed) {
  background-color: #e0e0e0; /* Slightly darker on hover or when expanded */
  color: #222;
}

.accordion-body {
  padding: 1rem;
  border-left: 1px solid #ddd; /* Add a left border */
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  border-radius: 0 0 5px 5px;
}

.accordion-item {
  border: 1px solid #ddd; /* Add border around the item */
  border-radius: 5px;
  margin-bottom: 10px;
  overflow: hidden; /* Important for rounded corners of content */
}

Explicación :

  • Apuntamos al botón .accordion para cambiar su color de fondo, color de texto y peso de fuente.
  • Las pseudoclases :hover y :not(.collapsed) se utilizan para darle estilo al botón cuando se pasa el cursor sobre él o cuando se expande su contenido.
  • Damos estilo al .accordion-body para agregar relleno y bordes.
  • Damos estilo al elemento .accordion-item para agregar un borde y esquinas redondeadas. overflow: hidden es importante para garantizar que las esquinas redondeadas del contenido no desborden el borde del elemento.

4. Uso de la clase .accordion-flush

La clase .accordion-flush elimina el color de fondo predeterminado, algunos bordes y las esquinas redondeadas del acordeón, creando una apariencia más limpia y estilizada.

<div class="accordion accordion-flush" id="myAccordionFlush">
  <div class="accordion-item">
    ...
  </div>
  <div class="accordion-item">
    ...
  </div>
</div>

Explicación :

  • Agregar la clase accordion-flush al elemento principal .accordion cambia el estilo predeterminado.

5. Permitir múltiples elementos abiertos

De forma predeterminada, los acordeones de Bootstrap garantizan que solo se abra un elemento a la vez. Para permitir la apertura de varios elementos, debe omitir el atributo data-bs-parent de los elementos .accordion-collapse .

<div class="accordion" id="myAccordionMultiple">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOneMultiple">
      <button class="accordion-button" type="button" 
data-bs-toggle="collapse" 
data-bs-target="#collapseOneMultiple" 
aria-expanded="true" aria-controls="collapseOneMultiple">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOneMultiple" 
class="accordion-collapse collapse show" 
aria-labelledby="headingOneMultiple">
      <div class="accordion-body">
        This is the content of accordion item #1.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwoMultiple">
      <button class="accordion-button collapsed" 
type="button" data-bs-toggle="collapse" 
data-bs-target="#collapseTwoMultiple" 
aria-expanded="false" aria-controls="collapseTwoMultiple">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwoMultiple" 
class="accordion-collapse collapse" 
aria-labelledby="headingTwoMultiple">
      <div class="accordion-body">
        This is the content of accordion item #2.
      </div>
    </div>
  </div>
</div>

Explicación:

  • Tenga en cuenta que el atributo data-bs-parent no está presente en los elementos .accordion-collapse . Esto permite múltiple elementos Estar abierto simultáneamente .

6. La función del atributo data-bs-parent

El atributo data-bs-parent del elemento .accordion-collapse es crucial para controlar el comportamiento del acordeón.

  • Propósito : Especifica el elemento de acordeón padre (por su ID).
  • Funcionalidad : Cuando data-bs-parent está presente, el complemento Bootstrap Collapse garantiza que solo un elemento dentro de ese acordeón principal esté abierto en cualquier momento. Al expandir un elemento, el complemento contrae automáticamente los demás.
  • Omisión : si se omite data-bs-parent , este comportamiento se deshabilita y se pueden abrir varios elementos de acordeón simultáneamente, como se muestra en la sección anterior.

En resumen, Bootstrap implementa acordeónes versátiles para mostrar contenido plegable. Comprender su estructura, la función del complemento Collapse y el atributo data-bs-parent es fundamental para usarlos eficazmente y personalizarlos según tus necesidades.

Post a Comment