Codice completo
L'accordion mostra una risposta quando l'utente clicca sulla domanda.
<div class="faq">
<button class="domanda">Cos'è JavaScript?</button>
<div class="risposta" hidden>È il linguaggio che rende interattive le pagine web.</div>
<button class="domanda">Dove si scrive?</button>
<div class="risposta" hidden>In un file .js oppure dentro un tag script.</div>
</div>
<script>
const domande = document.querySelectorAll('.domanda');
domande.forEach(function(domanda) {
domanda.addEventListener('click', function() {
const risposta = domanda.nextElementSibling;
risposta.hidden = !risposta.hidden;
});
});
</script>
Commento
- nextElementSibling prende l'elemento subito dopo la domanda.
- La proprietà hidden semplifica apertura e chiusura.
- Per un accordion esclusivo puoi chiudere tutte le altre risposte prima di aprire quella scelta.
Prova a modificarlo
Cambia nomi, testi e valori iniziali. Poi aggiungi una piccola regola CSS per rendere evidente lo stato dell'interfaccia.