Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m291:learningunits:lu04:aufgaben:b_accordion [2026/03/01 23:31] – gkoch
+++ de:modul:m291:learningunits:lu04:aufgaben:b_accordion [2026/03/01 23:34] (aktuell) – gkoch
@@ Zeile 41: / Zeile 41: @@
     <div class="panel">
       Antwort 3...
+    </div>
+  </div>
+  <div class="accordion-item">
+    <button class="accordion-btn" aria-expanded="false">
+      Frage 4
+    </button>
+    <div class="panel">
+      Antwort 4...
     </div>
   </div>
 </div>
-</code>
-</WRAP>
-==== JavaScript ====
-<WRAP center round box 80%>
-<code javascript>
-const buttons = document.querySelectorAll('.accordion-btn');
-buttons.forEach(btn => {
-  btn.addEventListener('click', () => {
-    const panel = btn.nextElementSibling;
-    const istOffen = panel.classList.contains('open');
-    // Alle Panels schliessen
-    buttons.forEach(andererBtn => {
-    // Code
-    });
-    // Dieses Panel öffnen (nur wenn es vorher zu war)
-    if (!istOffen) {
-    // Code
-    }
-  });
-});
 </code>
 </WRAP>
@@ Zeile 74: / Zeile 59: @@
 ===== Ihre Aufgabe =====
-Bauen Sie Ihr eigenes FAQ Accordion. Ziel für heute: HTML-Struktur, CSS und ein funktionierender Click-Handler.
+Bauen Sie Ihr eigenes FAQ Accordion. Ziel für heute: HTML-Struktur und CSS.
 **Schritt 1 – Neues Projekt anlegen**
@@ Zeile 87: / Zeile 72: @@
 **Schritt 2 – HTML-Struktur bauen**
-Erstellen Sie mindestens 3 FAQ-Items mit der Struktur aus dem Abschnitt oben. Denken Sie an ''aria-expanded="false"'' an jedem Button.
+Erstellen Sie die 4 FAQ-Items mit der Struktur aus dem Abschnitt oben. Denken Sie an ''aria-expanded="false"'' an jedem Button.
 **Schritt 3 – CSS stylen**
@@ Zeile 93: / Zeile 78: @@
   * Panel standardmässig mit ''display: none'' ausblenden
   * Klasse ''.open'' mit ''display: block'' definieren
-  * Button gestalten: ''width: 100%'', ''padding'', ''border: none'', ''cursor: pointer''
+  * Button gestalten: ''width: 100%'', ''padding'', ''border'', ''cursor: pointer''
-**Schritt 4 – JavaScript: Click-Handler**
-  * Alle Buttons mit ''querySelectorAll'' holen
-  * ''forEach'' über alle Buttons
-  * ''addEventListener('click', ...)'' auf jeden Button
-  * Panel mit ''classList.toggle('open')'' ein-/ausblenden
-**Schritt 5 – aria-expanded setzen**
-Beim Klick den korrekten Wert von ''aria-expanded'' mit ''setAttribute'' setzen. Tipp: Aktuellen Wert zuerst lesen (''getAttribute''), dann den umgekehrten setzen.
 <WRAP center round 80% important>