Cómo crear: efecto de plegado

Aprende a crear partes plegables.

Efecto desplegable

Haga clic en este botón para alternar entre mostrar y ocultar el contenido desplegable.

Algunos contenidos desplegables. Haga clic en el botón para alternar entre mostrar y ocultar el contenido desplegable. 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.

Prueba personalmente

Crear efecto de sección desplegable

Primer paso - Añadir HTML:

<button type="button" class="collapsible">Abrir Collapsible</button>
<div class="content">
  <p>Lorem ipsum...</p>
</div>

Segundo paso - Añadir CSS:

Establecer estilo de acordeón:

/* Establecer el estilo del botón para abrir y cerrar el contenido desplegable */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}
/* Añadir color de fondo al botón cuando se haga clic y cuando el ratón se mueva sobre él (hover), usando JS para agregar .active clase */
.active, .collapsible:hover {
  background-color: #ccc;
}
/* Establecer el estilo del contenido desplegable. Nota: oculto por defecto */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

Tercero - Añadir JavaScript:

var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

Prueba personalmente

efecto de colapso con animación (desplazamiento hacia abajo)

efecto de colapso con animación (desplazamiento hacia abajo) Para crear un efecto de colapso con animación, configuremax-height: 0、 overflow: hide max-height y

luego, usar JavaScript para agregar al panel de clase mediante la configuración de la propiedad calculada max-height desplazar el contenido hacia abajo, dependiendo de la altura del panel en diferentes tamaños de pantalla:

Ejemplo

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

Prueba personalmente

Añadir icono

Añadir un símbolo a cada botón para indicar si el contenido colapsable está abierto o cerrado:

Ejemplo

.collapsible:after {
  content: '\02795'; /* Representa el carácter Unicode de "mas" (+) */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2796"; /* Representa el carácter Unicode de "guion" (-) */
}

Prueba personalmente