nicht angemeldet
Hallo,
#question1,
#question2,
#question3,
#question4,
#question5,
#question6 {
background-color: gray;
border: 1px solid black;
width:100%;
height: 50px;
}
Verwende besser zwei Klassen question und answer, anstatt dutzende IDs mit Nummern. Dann reicht .question {…} .answer {…}.
<div id="question1" onclick="toggle('answer1'); hide('answer2,answer3')">Frage1
</div>
Die hide-Funktion erwartet *eine* ID und holt sich das zugehörige Element, daher lassen sich nicht einfach mehrere IDs durch Komma getrennt übergeben.
Natürlich könnte eine hide-Funktion mehrere IDs entgegen nehmen und sämtliche Parameter durchlaufen:
var hide = function() {
// Durchlaufe alle Parameter (arguments-Liste) mit einer for-Schleife
for (var i = 0, l = arguments.length; i < l; i++) {
document.getElementById(arguments[i]).style.display = 'none';
}
};
// Benutzung:
hide('id1', 'id2', 'id3', 'id3', …);
Aber wenn es dutzende Fragen/Antworten gibt, dann ist es nicht mehr praktisch, überall einzelne IDs aufzulisten. Wenn du zehn Fragen hast, müsstest du jeweils neun IDs zum Verstecken auflisten. Solche Wiederholungen sind unschön und lassen sich vermeiden.
Im vorigen Posting hatte ich beweusst eine vereinfachte Lösung gezeigt und hatte angemerkt, dass sich das verbessern ließe. Da du jetzt eine komplexere Logik brauchst, würde ich eine allgemeine Lösung vorschlagen:
http://codepen.io/molily/pen/eCsDt
Das ist natürlich komplizierter, aber so ungefähr sähe eine bessere, wartbare Lösung aus.
Auf IDs wird hier komplett verzichtet, damit ist die Anzahl der Fragen/Antworten variabel. Ein Pärchen wird jeweils mit gruppiert und bekommt die Klasse »qa«:
<section class="qa">
<h2 class="question">Frage</h2>
<p class="answer">Antwort</p>
</section>
Das Zeigen und Verstecken wird nicht mehr durch das Umschalten von display gelöst, sondern durch das Hinzufügen und Entfernen der Klasse »inactive«. Das ist mit dem classList-Objekt möglich, das das Hinzufügen (add), Löschen (remove), Umschalten (toggle) und Abfragen (contain) einer Klasse erlaubt.
Im CSS steht dann der Code, der die Antwort ausblendet. Dieses Ausblenden erfolgt in einer Weise, dass der Text zugänglich für Screenreader bleibt. display: none würde den Text nämlich komplett verstecken.
Wenn JavaScript nicht aktiviert ist, dann sind die Antworten sofort sichtbar, d.h. sie werden erst mit JavaScript durch das Hinzufügen der »invisible«-Klasse versteckt.
Noch mal Hintergrundinfos zum Event-Handling:
http://molily.de/js/event-handling-grundlagen.html
http://molily.de/js/event-handling-fortgeschritten.html
http://molily.de/js/event-handling-onload.html
Mathias