1. Code HTML

<div class="container">
  <h2>Frequently Asked Questions</h2>
 <div class="accordion">
 <div class="accordion-item">
  <button id="accordion-button-1" aria-expanded="false">
 <span class="accordion-title">Why is the moon sometimes
  out during the day?</span>
 <span class="icon" aria-hidden="true"></span>
  </button>
 <div class="accordion-content">
   <p>Lorem ipsum ...</p>
 </div>
 </div>
  <div class="accordion-item">
   <button id="accordion-button-2" aria-expanded="false">
    <span class="accordion-title">Why is the sky blue?</span>
     <span class="icon" aria-hidden="true"></span>
   </button>
 <div class="accordion-content">
   <p>Lorem ipsum ...</p>
  </div>
 </div>
  <!-- More items
  </div>
 </div>

Program di atas merupakan contoh struktur HTML untuk membuat sebuah accordion menggunakan JavaScript. Mari kita jelaskan masing-masing elemen dalam struktur tersebut:

1. <div class="container">: Ini adalah kontainer utama yang mengelilingi seluruh accordion. Ini bisa digunakan untuk menetapkan lebar, tinggi, dan gaya lainnya untuk accordion.

2. <h2>Frequently Asked Questions</h2>: Ini adalah judul accordion, yang memberikan konteks tentang apa yang akan ditampilkan di dalamnya. Dalam contoh ini, accordion berisi daftar pertanyaan yang sering diajukan.

3. <div class="accordion">: Ini adalah elemen yang mengelilingi seluruh daftar accordion. Ini adalah tempat di mana semua item accordion akan dimasukkan.

4. <div class="accordion-item">: Setiap item accordion diwakili oleh elemen ini. Di dalam setiap item accordion terdapat sebuah tombol dan konten yang terkait.

5. <button id="accordion-button-1" aria-expanded="false">: Ini adalah tombol yang digunakan untuk membuka atau menutup bagian accordion. id digunakan untuk mengidentifikasi tombol secara unik, sementara aria-expanded digunakan untuk memberikan informasi aksesibilitas tentang apakah konten accordion sedang terbuka atau tertutup.

6. <span class="accordion-title">Why is the moon sometimes out during the day?</span>: Ini adalah judul atau pertanyaan yang akan ditampilkan di tombol accordion. Di sini, judul pertanyaan "Why is the moon sometimes out during the day?" ditampilkan.

7. <div class="accordion-content">: Ini adalah konten yang terkait dengan item accordion tersebut. Konten ini akan ditampilkan atau disembunyikan ketika tombol di atasnya ditekan.

8. <p>Lorem ipsum ...</p>: Ini adalah teks dummy atau placeholder yang akan digantikan dengan konten nyata yang ingin ditampilkan untuk pertanyaan tersebut.

Setiap item accordion diulangi menggunakan struktur yang sama, dengan tombol dan konten yang sesuai untuk setiap pertanyaan atau item yang berbeda. Ini menciptakan daftar accordion yang dapat dibuka dan ditutup untuk menampilkan atau menyembunyikan konten terkait dengan pertanyaan yang berbeda.

2. Code CSS

.container {
margin: auto;
padding: 4rem;
width: 48rem;
}

.accordion .accordion-item {
border-bottom: 1px solid #e5e5e5; 
}

.accordion accordion-item button
[aria-expanded-true]{ 
border-bottom: 1px solid #03b5d2;
}

.accordion button {
display: block;
text-align: left;
width: 100%;
padding: 1em 0;
position: relative; font-weight: 400; 
color: #7288a2; font-size: 1.15rem;
border: none;
background: none;
outline: none;
}

.accordion button:hover, 
.accordion button:focus {
cursor: pointer;
color: #4D4D4D;
}

.accordion button:hover::after, 
.accordion button:focus::after {
cursor: pointer;
color: #03b5d2;
border: 1px solid #03b5d2;
}

.accordion button.accordion-title { 
padding: lem 1.5em lem 0;
}

.accordion button icon {
display: inline-block;
position: absolute;
top: 18px;
right: 0;
width: 22px;
height: 22px;
border: 1px solid;
border-radius: 22px;
}

accordion button[aria-expanded=true] 
.accordion-content {
opacity: 1;
max-height: 9em;
transition: all 200ms linear;
will-change: opacity, max-height;
}

.accordion.accordion-content {
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity 200ms linear, max-height 200ms linear;
will-change: opacity, max-height;
}

.accordion accordion-content p {
font-size: 1rem;
font-weight: 300;
margin: 2em 0;
}

Program di atas adalah kumpulan aturan CSS yang digunakan untuk mengatur tata letak dan gaya visual dari struktur HTML yang telah ditentukan sebelumnya untuk membuat accordion. Mari kita jelaskan beberapa bagian kunci dari kode CSS tersebut:

1. Pengaturan Kontainer Utama:

   • .container: Ini adalah kelas yang digunakan untuk mengatur tata letak dan ukuran kontainer utama di mana accordion akan ditempatkan. Properti margin, padding, dan width digunakan untuk mengatur jarak dari tepi halaman, spasi internal, dan lebar kontainer, masing-masing.

2. Gaya Accordion dan Itemnya:

   • .accordion .accordion-item: Digunakan untuk mengatur tampilan umum dari setiap item accordion, termasuk garis pembatas di antara setiap item.
   • .accordion accordion-item button[aria-expanded=true]: Digunakan untuk memberikan gaya khusus pada tombol accordion yang saat ini sedang diperluas (yaitu, aria-expanded=true). Di sini, properti border-bottom diterapkan untuk menyorot tombol yang aktif saat ini.

3. Gaya Tombol Accordion:

   • .accordion button: Mengatur gaya tombol accordion secara umum, termasuk tata letak, ukuran, dan properti lainnya.
   • .accordion button:hover, .accordion button:focus: Menentukan gaya saat tombol accordion dihover atau difokuskan, termasuk perubahan warna teks.
   • .accordion button.accordion-title: Memberikan properti gaya tambahan khusus untuk judul accordion.
   • .accordion button icon: Mengatur tampilan ikon yang menunjukkan status accordion (dibuka atau ditutup).

4. Gaya Konten Accordion:

   • .accordion accordion-content: Mengatur tampilan konten yang terkait dengan setiap item accordion, termasuk transisi ketika diperluas atau disusutkan.
   • .accordion accordion-content p: Memberikan gaya khusus untuk teks konten dalam accordion.

Dengan menggunakan aturan CSS ini, Anda dapat menyesuaikan tampilan dan perilaku accordion sesuai dengan desain dan kebutuhan proyek Anda.

3. Code JavaScript

const items document.querySelectorAll(".accordion button");
function toggleAccordion() {
const itemToggle this.getAttribute('aria-expanded');
for (1 = 0; <Items.length; i++) {
items[i].setAttribute('aria-expanded', 'false');
}

if (itemToggle == 'false') {
this.setAttribute('aria-expanded', 'true');
}
}

Ltems.forEach(item Ltem.addEventListener('click', toggleAccordion));

Program di atas adalah potongan kode JavaScript yang bertujuan untuk menambahkan fungsionalitas interaktif pada accordion yang telah dibuat dengan HTML dan CSS sebelumnya. Berikut adalah penjelasan tentang bagian-bagian utama dari kode tersebut:

1. Deklarasi Konstanta items:

   • const items = document.querySelectorAll(".accordion button");: Digunakan untuk mengambil semua elemen tombol di dalam accordion yang memiliki kelas CSS "accordion button" dan menyimpannya dalam sebuah konstanta items. Ini memungkinkan akses cepat dan efisien ke semua elemen tombol di dalam accordion.

2. Deklarasi Fungsi toggleAccordion():

   • Ini adalah fungsi yang akan dipanggil setiap kali tombol di dalam accordion ditekan. Fungsinya adalah untuk mengganti status aria-expanded pada tombol yang ditekan, sehingga mengatur apakah konten yang terkait harus diperluas atau disusutkan.
   • const itemToggle = this.getAttribute('aria-expanded');: Mendapatkan nilai atribut aria-expanded dari tombol yang ditekan dan menyimpannya dalam konstanta itemToggle. Ini menentukan apakah konten accordion yang terkait saat ini diperluas atau tidak.
   • Loop for: Di dalam loop ini, semua tombol di dalam accordion akan disetel ke aria-expanded = 'false', sehingga semua konten accordion akan disembunyikan.
   • Jika itemToggle adalah 'false' (artinya, konten accordion saat ini disembunyikan), maka tombol yang ditekan akan disetel ke aria-expanded = 'true', sehingga konten accordion terkait akan diperluas.

3. Menambahkan Event Listener ke Setiap Tombol Accordion:

   • items.forEach(item => item.addEventListener('click', toggleAccordion));: Ini menambahkan event listener click ke setiap tombol accordion. Ketika salah satu tombol tersebut ditekan, fungsi toggleAccordion() akan dipanggil, yang kemudian akan mengatur status aria-expanded sesuai dengan keadaan saat ini.

Dengan kode JavaScript ini, accordion akan memiliki fungsi interaktif di mana konten terkait akan diperluas atau disembunyikan saat tombolnya ditekan oleh pengguna.