En este consejo rápido, crearemos un acordeón en Bootstrap 4, lo ajustaremos con algunos cambios de CSS y aplicaremos algunas personalizaciones de JavaScript. ¡Comencemos!

Nota: Este tutorial asume que tienes cierto conocimiento de Bootstrap 4.

1. Incorpora los iconos Font Awesome

Para este tutorial, además de los archivos CSS y JavaScript Bootstrap requeridos, también he incorporado el paquete de iconos de Font Awesome en nuestro «pen». Podemos hacerlo enlazando al CDN de Font Awesome directamente desde nuestra configuración de CSS:

2. Crea un acordeón simple

Para crear nuestro acordeón, dependeremos del código del ejemplo para el componente plegable, generosamente proporcionado por Bootstrap.

Nuestro acordeón contendrá tres elementos plegables:

<div id="accordion" class="myaccordion">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

El contenido en el primer elemento plegable es el siguiente: una cabecera div que contiene un encabezado y un botón, y un segundo div con cualquier cosa que contenga el cuerpo (una lista en este caso).

<div class="card-header" id="headingOne">
  <h2 class="mb-0">
    <button class="d-flex align-items-center justify-content-between btn btn-link collapsed" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
      Undergraduate Studies
      <span class="fa-stack fa-sm">
        <i class="fas fa-circle fa-stack-2x"></i>
        <i class="fas fa-plus fa-stack-1x fa-inverse"></i>
      </span>
    </button>
  </h2>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
  <div class="card-body">
    <ul>
      <li>Computer Science</li>
      <li>Economics</li>
      <li>Sociology</li>
      <li>Nursing</li>
      <li>English</li>
    </ul>
  </div>
</div>

Observa que apilamos varios íconos en nuestro botón, gracias al estilizado incluido con Font Awesome.

Una vez hecho esto,añadimos el contenido para los dos elementos plegables restantes.

3. Añade algunos estilos básicos

Luego especificamos algunas reglas CSS para nuestro componente. Nada demasiado sofisticado, solo algunos colores básicos y estilos de tamaño para hacer que las cosas se vean un poco más especiales.

.myaccordion {
  max-width: 500px;
  margin: 50px auto;
  box-shadow: 0 0 1px rgba(0,0,0,0.1);
}

.myaccordion .card,
.myaccordion .card:last-child .card-header {
  border: none;
}

.myaccordion .card-header {
  border-bottom-color: #EDEFF0;
  background: transparent;
}

.myaccordion .fa-stack {
  font-size: 18px;
}

.myaccordion .btn {
  width: 100%;
  font-weight: bold;
  color: #004987;
  padding: 0;
}

.myaccordion .btn-link:hover,
.myaccordion .btn-link:focus {
  text-decoration: none;
}

.myaccordion li + li {
  margin-top: 10px;
}

¡Buen trabajo! Hasta el momento nuestro componente se ve así:

4. Personalizaciones

Con el HTML y CSS colocados, veamos algunas personalizaciones útiles que podemos añadir a nuestro acordeón.

Íconos alternantes

Por defecto, nuestros controles incluyen un ícono «más».

Cada vez que se hace clic en un control, sería agradable que tu icono cambie entre un icono «más» o «menos», según el estado del elemento plegable.

Para lograrlo podemos aprovechar los eventos show.bs.collapse y hide.bs.collapse

Aquí está el código JavaScript que se requiere para conmutar la clase en nuestro icono i:

$("#accordion").on("hide.bs.collapse show.bs.collapse", e => {
  $(e.target)
    .prev()
    .find("i:last-child")
    .toggleClass("fa-minus fa-plus");
});

Y aquí está la demostración correspondiente:

Establece el estado predeterminado

En nuestro ejemplo todos los elementos plegables están cerrados al inicio.

Pero digamos que queremos que el primer elemento plegable esté abierto por defecto. Para hacerlo, debemos añadirle la clase show, después, en el elemento button (control) relacionado, eliminamos la clase collapsed y, para accesibilidad, configuramos aria-expanded = "true".

Aquí está nuestro acordeón con el cambio hecho:

Varios elementos plegables abiertos

En ocaciones podríamos desear tener varios elementos plegables al mismo tiempo. Podemos lograr esto quitando el atributo data-parent de todos los elementos plegables.

Aquí está la demostración con ese comportamiento:

Animando la posición

Considera el siguiente escenario: imagina que existe mucho contenido dentro de los elementos plegables. En cierto punto, lees el texto dentro del segundo elemento, después de lo cual haces clic para ver el contenido del tercer elemento plegable. El segundo elemento se cierra de nuevo, así que ahora, para ver el inicio del tercer elemento, deberás volver a desplazarte hacia arriba. Ugh, no es un gran experiencia para el usuario.

Así se ve:

Un arreglo simple, que aprovecha el evento shown.bs.collapse, es efectuar una animación de desplazamiento a la posición superior del control asociado.

Para hacer esto, añadimos el siguiente código JavaScript a la demostración previa:

$("#accordion").on("shown.bs.collapse", e => {
  $("html, body").animate(
    {
      scrollTop: $(e.target)
        .prev()
        .offset().top
    },
    400
  );
});

¡Ahora revisémoslo nuevamente!

Conclusión

En este breve tutorial, experimentamos con el componente plegable de Bootstrap 4, creamos algunos ejemplos de acordeón, cubrimos algunos requisitos comunes y creamos algunas soluciones. Ahora puedes aplicar el conocimiento adquirido en tus próximos proyectos con Bootstrap.

Si alguna vez has creado otras extensiones útiles para un acordeón de Bootstrap, compártelo en los comentarios .

Enlaces útiles

• Componente plegable de Bootstrap 4