Accordéon FAQ interactif

Fait partie de la section JavaScript en action du Journey HTML de Coddy. Leçon 24 sur 27.

Défi

Facile

Nous avons une simple page de FAQ avec quelques questions. Ce type de conception est très courant : lorsqu’un utilisateur clique sur une question, la réponse masquée doit apparaître progressivement et en douceur. En même temps, nous pouvons faire pivoter le signe « + » en « × » pour montrer que la section est ouverte.

Nous avons une section FAQ avec une question. Votre tâche est de la rendre interactive :

En JavaScript :

Ajouter un écouteur d’événement de clic à la question de la FAQ
Lorsqu’elle est cliquée, basculer la classe "show" sur la réponse

En CSS :
Ajouter des styles afin que :

Lorsque la réponse de la FAQ possède la classe "show", définir son opacité sur 1 et sa hauteur maximale sur 300px

Essayez vous-même

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