Accordéon (développer/réduire)

Fait partie de la section JavaScript in Action du Journey HTML de Coddy — leçon 2 sur 27.

Un accordéon est un composant d'interface utilisateur (UI) qui vous permet de développer et de réduire des sections de contenu. Il est souvent utilisé pour les FAQ (cliquez sur une question → affichez la réponse, cliquez à nouveau → masquez-la).
L'idée est simple : lorsque vous cliquez sur un en-tête, JavaScript bascule la visibilité du contenu situé en dessous.

Points clés :

Nous avons un bouton et un élément de contenu qui est masqué par défaut (display: none).

Cliquer sur le bouton déclenche la fonction et transmet l'ID de l'élément qui doit s'ouvrir.

À l'intérieur de la fonction :
- Si l'élément est déjà affiché (display: block), nous le cachons (display: none).
- Sinon, nous l'affichons (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>

Défi

Facile

Pour l'instant, notre accordéon comporte trois questions. Votre tâche consiste à en ajouter une quatrième.

Étapes :

Créez un nouveau <button> avec le texte : Should I add milk or drink it black?
Liez-le à un nouveau panneau en appelant la fonction onclick="togglePanel('q4')"
Créez un <div> avec l'id="q4" et la classe panel.
À l'intérieur du div, écrivez la réponse :
It depends on your taste! Black coffee has stronger flavor, while milk softens the bitterness.

Essayez vous-même

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