Mục FAQ tương tác dạng thu gọn

Thuộc phần JavaScript trong thực tế trong hành trình HTML của Coddy. Bài học 24 trên 27.

Thử thách

Dễ

Chúng ta có một trang FAQ đơn giản với một vài câu hỏi. Kiểu thiết kế này rất phổ biến: khi người dùng nhấp vào một câu hỏi, câu trả lời đang ẩn sẽ trượt xuống một cách mượt mà. Đồng thời, chúng ta có thể xoay dấu “+” thành dấu “×” để cho biết mục đã mở.

Chúng ta có một mục FAQ với một câu hỏi. Nhiệm vụ của bạn là làm cho mục này có tính tương tác:

Trong JavaScript:

Thêm trình lắng nghe sự kiện nhấp vào câu hỏi FAQ
Khi được nhấp, bật hoặc tắt lớp "show" trên câu trả lời

Trong CSS:
Thêm kiểu sao cho:

Khi câu trả lời FAQ có lớp "show", đặt độ mờ thành 1 và chiều cao tối đa thành 300px

Tự làm thử

<!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>