Akordeon dalam JavaScript

Sekarang mari kita implementasikan akordeon. Ia mirip dengan tab yang dibalik secara horizontal. Namun, dalam akordeon, tab yang aktif dapat ditutup jika tautan aktif ditekan.

Berikut adalah contohnya:

Pelajari juga markup yang akan kita gunakan untuk menyelesaikan tugas ini:

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

Diskusi

Secara teknis, kode HTML akordeon lebih mudah daripada kode tab: di dalamnya, tautan terletak langsung di atas spoiler yang mereka buka dan tutup. Selain itu, kelas active dalam markup kita diberikan kepada induk bersama dari tautan dan spoiler.

Ini berarti bahwa ketika tautan ditekan, kita hanya perlu menonaktifkan tab lama dan mengaktifkan tab baru. Untuk menonaktifkan tab lama, kita perlu mencari tab dengan kelas active dan menghapus kelas tersebut darinya.

Untuk mengaktifkan tab baru, kita perlu berdasarkan klik pada tautan, temukan induk tab dari tautan ini dan berikan dia kelas active. Secara teknis pencarian seperti itu dapat dilakukan seperti ini: cukup temukan induk terdekat dari tautan, yang memiliki kelas tab.