von diwie |
danke für eure anregungen. habe mir daraus folgendes gebastelt:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12: |
function toggleAll() {
var x = document.getElementsByTagName('span');
for (var i=0;i<x.length;i++)
{
if (x[i].className == 'answer') {
if (x[i].style.display !== "") x[i].style.display = ""
else x[i].style.display = "none"
}
}
}
|
|
von diwie |
Der Code schaut in etwa so aus. Dabei handelt es sich um eine FAQ Liste. Wo zunächst nur die Fragen zu sehen sein sollen und bei klick auf selbige darunter die Antwort erscheint. Es werden mehr als 20 Fragen. Ich möchte zusätzlich noch einen Link anbieten, wo die Antworten ALLER Fragen auf einmal eingeblendet werden. PHP zu Hilfenahme wäre auch kein Problem, nur mit JS kenne ich mich nicht so gut aus.
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11: |
<a href="javascript:;" onClick="toggleDisplay('faq1')">Frage1</a>
<span id="faq1" style="display: none;">Antwort1</span>
<a href="javascript:;" onClick="toggleDisplay('faq2')">Frage2</a>
<span id="faq2" style="display: none;">Antwort2</span>
.....
usw.
|
die JS-funktion zum einzelnen einblenden:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11: |
function toggleDisplay(id) {
if (document.getElementById) {
var e = document.getElementById(id);
if (e) {
if (e.style.display !== "") e.style.display = ""
else e.style.display = "none"
}
}
}
|
|
von subjective |
Um das etwas zu optimieren könntest du die IDs auch beim Laden der Seite in JS-Arrays ablegen. Ich nutze in solchen Fällen meist getElementsByTagName() und das class-Attribut (statt id wie bei dir). |
von languitar |
Du baust dir einfach eine Funktion mit JS mit dem namen switchall() oder sonst was und packst da hintereinander einfach die Änderungsanweisungen für jeden der einzelnen Blöcke.
Die Funktion kannst du dann ja irgendwo aufrufen. |
von Impigra |
Wenn Du ein bischen mehr von Deinem Code preis gibst,
könnte ich mir vorstellen dass sich mehrere besser in die Problematik reinlesen können.
|