WebWork Magazin - Webseiten erstellen lassen, Online Medien, html

Webhoster, Webhosting Provider und Domain registrieren

Home | Registrieren | Einloggen | Suchen | Aktuelles | GSL-Webservice | Suleitec Webhosting
Reparatur-Forum | Elektro forum | Ersatzteilshop Haushalt und Elektronik


Homepage und Webhosting-Forum

HTML, XHTML, CSS , style, XML, Javascript und mehr, Fragen, Tipps und Anregungen zu diesen Basic Techniken - hier rein !


Forum » HTML, CSS - Hilfe für das Erstellen einer Homepage » style:display - mehrere blöcke auf einmal switchen » Antworten
Benutzername:
Passwort: Passwort vergessen?
Inhalt der Nachricht: Fett | Kursiv | Unterstrichen | Link | Bild | Smiley | Zitat | Zentriert | Quellcode| Kleiner Text
Optionen: Emailbenachrichtigung bei Antworten
 

Die letzten 5 Postings in diesem Thema » Alle anzeigen
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.


Nach oben