Accordion på JavaScript

La oss nå implementere en accordion. Den ligner på faner som er vendt på siden. I tillegg kan man lukke den aktive fanen i en accordion ved å klikke på den aktive lenken.

Her er et eksempel:

Studer også HTML-strukturen som vi skal løse oppgaven på:

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

Diskusjon

Teknisk sett er HTML-koden for en accordion mer praktisk enn koden for faner: i den er lenkene plassert direkte over spoileren som de åpner og lukker. I tillegg gis klassen active i vår HTML-struktur til den felles forelderen til lenken og spoileren.

Dette betyr at når man klikker på en lenke, trenger man bare å deaktivere den gamle fanen og aktivere den nye. For å deaktivere den gamle fanen må man finne fanen med klassen active og fjerne denne klassen fra den.

For å aktivere en ny fane må man ved klikk på lenken finne forelder-fanen til denne lenken og gi den klassen active. Teknisk sett kan en slik søk gjøres slik: bare finn nærmeste forelder til lenken som har klassen tab.