Accordion FAQ Interaktif

Termasuk bagian JavaScript dalam Aksi dalam perjalanan HTML di Coddy. Pelajaran 24 dari 27.

Tantangan

Mudah

Kita memiliki halaman FAQ sederhana dengan beberapa pertanyaan. Desain seperti ini sangat umum: ketika pengguna mengeklik pertanyaan, jawaban tersembunyi seharusnya meluncur turun dengan mulus. Pada saat yang sama, kita dapat memutar tanda “+” menjadi “×” untuk menunjukkan bahwa bagian tersebut terbuka.

Kita memiliki bagian FAQ dengan satu pertanyaan. Tugasmu adalah membuatnya interaktif:

Dalam JavaScript:

Tambahkan pendengar event klik pada pertanyaan FAQ
Saat diklik, aktifkan atau nonaktifkan class "show" pada jawaban

Dalam CSS:
Tambahkan style agar:

Saat jawaban FAQ memiliki class "show", atur opacity-nya menjadi 1 dan max-height menjadi 300px

Coba sendiri

<!DOCTYPE html>
<html>
<head>
  <title>FAQ Challenge</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
   <h1>FAQ – Healthy Lifestyle</h1>
  <div class="faq">
    <div class="faq-item">
      <div class="faq-question">
        <span>What does a balanced diet mean?</span>
        <span>+</span>
      </div>
      <div class="faq-answer">
        A balanced diet includes a variety of foods — fruits, vegetables, whole grains, lean proteins, and healthy fats — in the right proportions to keep your body nourished and energized.
      </div>
    </div>
  </div>
 <script src="script.js"></script>
</body>
</html>