Akordeon v JavaScriptu

Nyní implementujme akordeon. Je podobný záložkám, které jsou otočené na bok. Navíc v akordeonu lze aktuální záložku zavřít kliknutím na aktivní odkaz.

Zde je ukázka:

Prostudujte také HTML strukturu, na které budeme řešit úlohu:

html<div id="parent">
  <div class="tab active">
    <div class="link">
      <a href="#" >záložka 1</a>
    </div>
    <div class="text">
      text záložky 1
    </div>
  </div>
  <div class="tab">
    <div class="link">
      <a href="#" >záložka 2</a>
    </div>
    <div class="text">
      text záložky 2
    </div>
  </div>
  <div class="tab">
    <div class="link">
      <a href="#" >záložka 3</a>
    </div>
    <div class="text">
      text záložky 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;
}

Diskuse

Technicky je HTML kód akordeonu pohodlnější než kód záložek: v něm jsou odkazy umístěny přímo nad obsahem, který otevírají a zavírají. Navíc třída active v naší struktuře je přiřazena společnému rodiči odkazu a obsahu.

To znamená, že při kliknutí na odkaz stačí pouze deaktivovat starou záložku a aktivovat novou. Pro deaktivaci staré záložky je třeba najít záložku s třídou active a odstranit z ní tuto třídu.

Pro aktivaci nové záložky je třeba při kliknutí na odkaz najít rodičovskou záložku tohoto odkazu a přidat jí třídu active. Technicky lze takové vyhledání provést takto: jednoduše najít nejbližšího rodiče odkazu, který má třídu tab.