Cómo crear: contenido plegable / acordeón

Aprende a crear un acordeón (contenido plegable).

Acordeón

El acordeón es muy útil cuando quieres alternar entre ocultar y mostrar una gran cantidad de contenido:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Pruebe usted mismo

Crear un acordeón

Primer paso - Agregar HTML：

<button class="accordion">Sección 1</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>
<button class="accordion">Sección 2</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>
<button class="accordion">Sección 3</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

Segundo paso - Agregar CSS：

Establecer el estilo del acordeón

/* Establecer el estilo para los botones que abren y cierran el panel de acordeón */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}
/* Si se hace clic en el botón (se agrega la clase .active con JS), se le añade un color de fondo y cuando se pasa el ratón sobre él (paso de ratón) */
.active, .accordion:hover {
  background-color: #ccc;
}
/* Añadir estilo al panel de acordeón. Nota: por defecto está oculto */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}

Tercero paso - Agregar JavaScript：

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    /* Cambiar entre agregar y eliminar la clase "active" para resaltar los botones del panel de control */
    this.classList.toggle("active");
    /* Cambiar entre ocultar y mostrar el panel activo */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {}}
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

Pruebe usted mismo

acordeón animado (deslizamiento hacia abajo)

Para crear un acordeón animado, agregue max-height: 0,overflow: hidden y max-height efecto de transición de la propiedad.

luego, use JavaScript para calcular y establecer max-heightpara lograr el efecto de deslizamiento hacia abajo del contenido:

<style>
.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}
</script>

Pruebe usted mismo

Agregar icono

Agregar un símbolo en cada botón para indicar si el contenido colapsable está abierto o cerrado:

.accordion:after {
  content: '\02795'; /* "más" (más) del carácter Unicode */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2796"; /* "guía" (guía) del carácter Unicode */
}

Pruebe usted mismo