Skrypt 9: Rozwijane pytania FAQ (akordeon)

Teoria

Klasyczna lista pytań i odpowiedzi (FAQ), gdzie kliknięcie pytania rozwija/zwija odpowiedź pod spodem — pozwala pokazać dużo informacji na stronie bez przytłaczania jej ogromem tekstu widocznego od razu.

Kod (JavaScript)

<button class="pytanie">Jak długo trwa dostawa?</button>
<div class="odpowiedz" style="display: none;">Standardowa dostawa trwa 2-3 dni robocze.</div>

<button class="pytanie">Czy mogę zwrócić produkt?</button>
<div class="odpowiedz" style="display: none;">Tak, w ciągu 14 dni od zakupu.</div>

<script>
    const pytania = document.querySelectorAll(".pytanie");

    for (const pytanie of pytania) {
        pytanie.addEventListener("click", function () {
            const odpowiedz = pytanie.nextElementSibling; // element zaraz po przycisku

            if (odpowiedz.style.display === "none") {
                odpowiedz.style.display = "block";
            } else {
                odpowiedz.style.display = "none";
            }
        });
    }
</script>

Komentarz i wyjaśnienie kodu

nextElementSibling to właściwość DOM zwracająca element leżący ZARAZ PO danym elemencie w kodzie HTML — dzięki temu nie trzeba nadawać osobnych id każdej parze pytanie-odpowiedź, wystarczy zachować odpowiednią kolejność znaczników. Pętla for...of podpina IDENTYCZNĄ obsługę zdarzenia pod KAŻDE pytanie na liście naraz.

Typowe błędy

Ten skrypt zadziała poprawnie TYLKO wtedy, gdy <div class="odpowiedz"> jest bezpośrednio (bez niczego pomiędzy) po przycisku pytania w kodzie HTML — inna kolejność złamie działanie nextElementSibling.