FAQ interattive a fisarmonica

Fa parte della sezione JavaScript in azione del percorso HTML di Coddy. Lezione 24 di 27.

Sfida

Facile

Abbiamo una semplice pagina FAQ con alcune domande. Questo tipo di design è molto comune: quando un utente fa clic su una domanda, la risposta nascosta dovrebbe scorrere verso il basso in modo fluido. Allo stesso tempo, possiamo ruotare il segno “+” trasformandolo in “×” per indicare che la sezione è aperta.

Abbiamo una sezione FAQ con una domanda. Il tuo compito è renderla interattiva:

In JavaScript:

Aggiungi un listener per l'evento click alla domanda delle FAQ
Al clic, attiva o disattiva la classe "show" sulla risposta

In CSS:
Aggiungi stili in modo che:

Quando la risposta delle FAQ ha la classe "show", imposta la sua opacità su 1 e max-height su 300px

Provalo tu

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