Accordion Html Css

MUAZHAN

3 min read

·

Jun 29, 2024

18

Share

Membangun Accordion dengan HTML dan CSS

Accordion adalah elemen interaktif yang memungkinkan pengguna untuk menampilkan atau menyembunyikan konten dengan mengklik panel. Elemen ini sering digunakan untuk menampilkan informasi yang terstruktur dengan rapi dan efisien, seperti FAQ, informasi tambahan, atau pengaturan.

Dalam artikel ini, kita akan belajar bagaimana membangun accordion sederhana dengan HTML dan CSS.

HTML Struktur

Pertama, kita perlu membangun struktur HTML untuk accordion. Kita akan menggunakan tag <div> untuk setiap panel accordion. Setiap panel terdiri dari dua bagian: judul panel dan konten panel.

  

    
Judul Panel 1
    

      
Konten panel 1.
    
  
  

    
Judul Panel 2
    

      
Konten panel 2.
    
  

CSS Styling

Berikut adalah contoh styling CSS untuk accordion:

.accordion {
  width: 300px;
  margin: 0 auto;
}

.accordion-item {
  background-color: #f2f2f2;
  border-bottom: 1px solid #ccc;
  padding: 10px;
  cursor: pointer;
}

.accordion-title {
  margin: 0;
  font-weight: bold;
}

.accordion-content {
  display: none;
  padding: 10px;
}

.accordion-item.active .accordion-content {
  display: block;
}

Pada CSS ini, kita:

• Mengatur lebar accordion dan menaruhnya di tengah halaman.
• Memberikan latar belakang dan padding pada setiap panel accordion.
• Mengatur style judul panel dan menyembunyikan konten panel secara default.
• Menambahkan kelas active pada panel accordion yang sedang aktif untuk menampilkan kontennya.

JavaScript untuk Interaksi

Untuk membuat accordion interaktif, kita perlu menambahkan sedikit JavaScript untuk menangani event klik pada panel accordion.

const accordionItems = document.querySelectorAll('.accordion-item');

accordionItems.forEach(item => {
  item.addEventListener('click', () => {
    // Toggle kelas 'active' pada panel yang diklik
    item.classList.toggle('active');

    // Hapus kelas 'active' dari panel lain
    accordionItems.forEach(otherItem => {
      if (otherItem !== item) {
        otherItem.classList.remove('active');
      }
    });
  });
});

JavaScript ini akan:

• Mencari semua elemen dengan kelas accordion-item.
• Menambahkan event listener click pada setiap elemen.
• Saat diklik, event listener akan:
  • Menambahkan atau menghapus kelas active pada panel yang diklik.
  • Menghapus kelas active dari panel lain.

Kesimpulan

Dengan menggunakan HTML, CSS, dan sedikit JavaScript, kita dapat membangun accordion sederhana yang fungsional dan menarik secara visual. Anda dapat menyesuaikan styling dan fungsionalitas accordion sesuai dengan kebutuhan proyek Anda.