Accordéon FAQ interactif

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

Défi

Facile

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

Nous avons une section FAQ avec une question. Votre travail consiste à la rendre interactive :

En JavaScript :

Ajoutez un écouteur d'événement de clic (click) à la question de la FAQ
Lorsqu'on clique dessus, basculez la classe "show" sur la réponse

En CSS :
Ajoutez des styles pour que :

Lorsque la réponse de la FAQ possède la classe "show", définissez son opacity à 1 et son max-height à 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>