Come creare: contenuto ripiegabile/accordion

Impara a creare un pannello a libro (contenuti ripiegabili).

Pannello a libro

Il pannello a libro è molto utile quando si desidera passare da contenuti nascosti a quelli visibili:

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.

Prova da solo

Crea un pannello a libro

Passo 1 - Aggiungi HTML：

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

Passo 2 - Aggiungi CSS：

Imposta lo stile del pannello a libro

/* Imposta lo stile per i pulsanti di apertura e chiusura del pannello a libro */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}
/* Se il pulsante viene cliccato (aggiungi la classe .active con JavaScript), aggiungi un colore di sfondo e quando il mouse è sopra di esso (hover) */
.active, .accordion:hover {
  background-color: #ccc;
}
/* Aggiungi stili al pannello a libro. Attenzione: è nascosto per default */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}

Passo 3 - Aggiungi JavaScript：

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    /* Commutare l'aggiunta e la rimozione della classe "active" per evidenziare i pulsanti del pannello di controllo */
    this.classList.toggle("active");
    /* Commutare la visualizzazione e la nascondita del pannello attivo */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

Prova da solo

Accordion animato (scorrimento in basso)

Per creare un accordion animato, aggiungi alla classe del pannello: max-height: 0,overflow: hidden e max-height effetto di transizione delle proprietà.

Poi, usa JavaScript per calcolare e impostare altezza del pannello in base alle diverse dimensioni dello schermo: max-heightper realizzare l'effetto di scorrimento in basso del contenuto:

<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>

Prova da solo

Aggiungi icona

Aggiungi un simbolo su ogni pulsante per indicare se il contenuto accorciabile è aperto o chiuso:

.accordion:after {
  content: '\02795'; /* "Segno più" (più) carattere Unicode */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2796"; /* "Segno meno" (meno) carattere Unicode */
}

Prova da solo