Accordion in JS umsetzen

Stef · 10. Januar 2018

Hey,

ich habe mir nun mal die Aufgabe gesetzt mit Javascript ein Accordion zu programmieren.
Ich lerne dies von der w3c-Seite. Nun habe ich es so erstellt wie ich es gelernt habe aber es funktioniert nicht. Das Accordion öffnet und schließt sich nicht.

Ich habe beide Codes mal verglichen aber sehe da keinen Fehler.

Mein Script (funktioniert nicht):

JavaScript

window.onload = function(){

            var accordions = document.getElementsByClassName("accordion");
            var a;

            for(a = 0; a < accordions.length; a++){

                accordions[a].addEventListener("click", function(){

                        this.classList.toogle("showPanel");

                        var panel = this.nextElementSibling;
                        alert(panel);
                        if(panel.style.display === "block"){
                            panel.style.display = "none";
                        } else{
                            panel.style.display = "block";
                        }

                });
            }
        }

Alles anzeigen

w3c-script (funktioniert)

JavaScript

window.onload = function(){

            var acc = document.getElementsByClassName("accordion");
                var i;

                for (i = 0; i < acc.length; i++) {
                    acc[i].addEventListener("click", function() {
                        
                        this.classList.toggle("showPanel");

                        
                        var panel = this.nextElementSibling;
                        if (panel.style.display === "block") {
                            panel.style.display = "none";
                        } else {
                            panel.style.display = "block";
                        }
                    });
            } 
        }

Alles anzeigen

Hoffe ihr erkennt den Fehler.

Stef

basti1012 · 10. Januar 2018

kannst du mal den html teil posten ? weil da sehe ich jetzt kein fehler. und die css vieleicht wenn du schon hast

Stef · 10. Januar 2018

Hier ist der HTML-Teil. Aber daran kann es nicht liegen. Sonst würde auch das w3c-beispiel nicht funktionieren.

HTML

<body>
    <header>
        <h1>Accordion</h1>
    </header>
    <main>
        <section>
            <button class="accordion">Accordion 1</button>
            <article class="panel">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            </article>

            <button class="accordion">Accordion 2</button>
            <article class="panel">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            </article>

            <button class="accordion">Accordion 3</button>
            <article class="panel">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            </article>
        </section>
    </main>
</body>

Alles anzeigen

JR Cologne · 10. Januar 2018

Du hast einen kleinen Schreibfehler drin.

Statt toggle, hast du toogle geschrieben.

basti1012 · 10. Januar 2018

den habe ich auch übersehen. habe extra alles kontroliert und trotzdem das eine oh nicht gesehen . hammer hart

Stef · 11. Januar 2018

Hey,

ach ja. Ist mir garnicht aufgefallen.

Vielen Dank für die Hilfe

Accordion in JS umsetzen

Jetzt mitmachen!

Teilen