zložljivi elementi, accordion, collapsible

Zložljivi elementi (ang. Accordion/Collapsible)

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>zložljivi elementi, accordion, collapsible</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<button class="acc">DEMO 02</button>
    <div class="panel">
        <h3>DEMO 02</h3>
        <p>Dobrodošli v moji vadnici!</p>
        <img src="/demo/smiley.png" alt="smeško">
    </div>

<button class="acc">DEMO 03</button>
    <div class="panel">
        <h3>DEMO 03</h3>
        <p>Dobrodošli v moji vadnici!</p>
        <img src="/demo/smiley.png" alt="smeško">
    </div>

<button class="acc">DEMO 04</button>
    <div class="panel">
        <h3>DEMO 04</h3>
        <p>Dobrodošli v moji vadnici!</p>
        <img src="/demo/smiley.png" alt="smeško">
    </div>

<button class="acc">DEMO 05</button>
    <div class="panel">
        <h3>DEMO 05</h3>
        <p>Dobrodošli v moji vadnici!</p>
        <img src="/demo/smiley.png" alt="smeško">
    </div>
</div>

for (i = 0; i < accordion.length; i++) {
        accordion[i].addEventListener("click", function() {

const panel = this.nextElementSibling;

if (panel.style.display === "block"){
                panel.style.display = "none";
            }   else {
                let active = document.querySelectorAll(".accBox .acc.active");

for(i = 0; i < active.length; i++){
                    active[i].classList.remove("active");
                    active[i].nextElementSibling.style.display = "none";
                }
                this.classList.toggle("active");
                panel.style.display = "block";
            }
        })
    }
</script>
</body>
</html>