Fisarmonica (espandi/comprimi)

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

Un accordion è un componente dell’interfaccia utente che ti permette di espandere e comprimere sezioni di contenuto. Viene spesso usato per le FAQ (fai clic su una domanda → mostra la risposta, fai clic di nuovo → nascondila).
L’idea è semplice: quando fai clic su un’intestazione, JavaScript attiva o disattiva la visibilità del contenuto sottostante.

Punti chiave:

Abbiamo un pulsante e un elemento di contenuto nascosto per impostazione predefinita (display: none).

Facendo clic sul pulsante viene attivata la funzione e viene passato l'ID dell'elemento che dovrebbe aprirsi.

All'interno della funzione:
- Se l'elemento è già visibile (display: block), lo nascondiamo (display: none).
- Altrimenti, lo mostriamo (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>

Sfida

Facile

Al momento, il nostro accordion ha tre domande. Il tuo compito è aggiungerne una quarta.

Passaggi:

Crea un nuovo <button> con il testo: Should I add milk or drink it black?
Collegalo a un nuovo pannello chiamando la funzione onclick="togglePanel('q4')"
Crea un <div> con l'id="q4" e la classe panel.
All'interno del div, scrivi la risposta:
It depends on your taste! Black coffee has stronger flavor, while milk softens the bitterness.

Provalo tu

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