Accordion in JavaScript

Ora implementiamo un accordion. È simile a delle schede ribaltate su un lato. Inoltre, nell'accordion è possibile chiudere la scheda corrente, se si clicca sul link attivo.

Ecco un esempio:

Studiate anche il markup su cui risolveremo il problema:

html<div id="parent">
  <div class="tab active">
    <div class="link">
      <a href="#" >scheda 1</a>
    </div>
    <div class="text">
      testo scheda 1
    </div>
  </div>
  <div class="tab">
    <div class="link">
      <a href="#" >scheda 2</a>
    </div>
    <div class="text">
      testo scheda 2
    </div>
  </div>
  <div class="tab">
    <div class="link">
      <a href="#" >scheda 3</a>
    </div>
    <div class="text">
      testo scheda 3
    </div>
  </div>
</div>

css#parent {
  margin: 0 auto;
  width: 400px;
}
.tab {
  margin-bottom: 10px;
}

.tab .link a {
  display: block;
  padding: 10px;
  color: black;
  text-decoration: none;
  text-align: center;
  background: #f8f8f8;
  border: 1px solid gray;
}
.tab .link:hover a {
  background: #f2f2f2;
}

.tab:not(.active) .text {
  display: none;
}
.tab .text {
  border: 1px dashed gray;
  border-top: none;
  
  padding: 10px;
  height: 300px;
}

Discussione

Tecnicamente il codice HTML dell'accordion è più conveniente del codice delle schede: in esso i link sono posizionati direttamente sopra lo spoiler che aprono e chiudono. Inoltre, la classe active nel nostro markup viene data al genitore comune del link e dello spoiler.

Ciò significa che quando si clicca su un link basta disattivare la vecchia scheda e attivare quella nuova. Per disattivare la vecchia scheda bisogna trovare la scheda con la classe active e rimuovere da essa questa classe.

Per attivare una nuova scheda è necessario, in base al click sul link, trovare il genitore di questa scheda link e darle la classe active. Tecnicamente una tale ricerca può essere fatta così: basta trovare il genitore più vicino del link che ha la classe tab.