Akordeon w JavaScript

Zaimplementujmy teraz akordeon. Jest on podobny do zakładek odwróconych na bok. Jednakże w akordeonie można zamknąć bieżącą zakładkę, klikając na aktywny link.

Oto przykład:

Przeanalizuj również układ, na którym będziemy rozwiązywać zadanie:

html<div id="parent">
  <div class="tab active">
    <div class="link">
      <a href="#" >zakładka 1</a>
    </div>
    <div class="text">
      tekst zakładki 1
    </div>
  </div>
  <div class="tab">
    <div class="link">
      <a href="#" >zakładka 2</a>
    </div>
    <div class="text">
      tekst zakładki 2
    </div>
  </div>
  <div class="tab">
    <div class="link">
      <a href="#" >zakładka 3</a>
    </div>
    <div class="text">
      tekst zakładki 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;
}

Dyskusja

Technicznie kod HTML akordeonu jest wygodniejszy niż kod zakładek: w nim linki znajdują się bezpośrednio nad spoilerm, który otwierają i zamykają. Ponadto, klasa active w naszym układzie nadawana jest wspólnemu rodzicowi linku i spoilera.

Oznacza to, że po kliknięciu na link trzeba po prostu deaktywować starą zakładkę i aktywować nową. Aby deaktywować starą zakładkę trzeba znaleźć zakładkę z klasą active i usunąć z niej tę klasę.

Aby aktywować nową zakładkę trzeba po kliknięciu na link znaleźć zakładkę-rodzica tego linku i nadać jej klasę active. Technicznie takie wyszukiwanie można zrobić tak: po prostu znaleźć najbliższego rodzica linku, posiadającego klasę tab.