Mục mở rộ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 2 trên 27.

accordion là một thành phần giao diện người dùng cho phép bạn mở rộng và thu gọn các phần nội dung. Thành phần này thường dùng cho mục hỏi đáp (nhấp vào câu hỏi → hiện câu trả lời, nhấp lần nữa → ẩn câu trả lời).
Ý tưởng rất đơn giản: khi bạn nhấp vào tiêu đề, JavaScript bật hoặc tắt chế độ hiển thị của nội dung bên dưới.

Điểm chính:

Chúng ta có một nút và một phần tử nội dung được ẩn theo mặc định (display: none).

Nhấp vào nút sẽ gọi hàm và truyền ID của phần tử cần mở.

Bên trong hàm:
- Nếu phần tử đang hiển thị (display: block), ta ẩn phần tử đó (display: none).
- Nếu không, ta hiển thị phần tử đó (display: block).

<button onclick="toggle('p1')">Question 1</button>
<div id="p1" style="display:none;">Answer 1</div>

<script>
  function toggle(id) {
    const element = document.getElementById(id);
    if (element.style.display === "block") {
      element.style.display = "none";
    } else {
      element.style.display = "block";
    }
  }
</script>

Thử thách

Dễ

Hiện tại, accordion của chúng ta có ba câu hỏi. Nhiệm vụ của bạn là thêm câu hỏi thứ tư.

Các bước:

Tạo một <button> mới với nội dung: Should I add milk or drink it black?
Liên kết nút đó với một panel mới bằng cách gọi hàm onclick="togglePanel('q4')"
Tạo một <div> có id="q4" và class panel.
Bên trong div, viết câu trả lời:
It depends on your taste! Black coffee has stronger flavor, while milk softens the bitterness.

Tự làm thử

<!DOCTYPE html>
<html>
<head>
  <title>FAQ Accordion</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1>FAQ Coffee Lovers</h1>

  <button class="accordion" onclick="togglePanel('q1')">What is the best way to brew coffee at home?</button>
  <div id="q1" class="panel">
    The French press and pour-over methods are popular for making rich, flavorful coffee at home.
  </div>

  <button class="accordion" onclick="togglePanel('q2')">Where do coffee beans come from?</button>
  <div id="q2" class="panel">
    Most coffee beans are grown in countries around the equator, such as Brazil, Ethiopia, and Colombia.
  </div>

  <button class="accordion" onclick="togglePanel('q3')">How late can I drink coffee?</button>
  <div id="q3" class="panel">
    It's best to avoid coffee 6 hours before bedtime, since caffeine can affect your sleep.
  </div>


  <script src="script.js"></script>
</body>
</html>