Home | Registrieren | Einloggen | Suchen | Aktuelles


Forum » Auszeichnungssprachen » style:display - mehrere blöcke auf einmal switchen<... Antworten
style:display - mehrere blöcke auf einmal switchen

diwie
Otto-Normal-Poster


Beiträge: 51


ich habe mehrere blöcke mit unterschiedlichen id's (id1 - idxx), diese kann ich über einen jeweiligen textlink sichtbar/unsichtbar switchen. das klappt sehr gut.

nun möchte ich zusätzlich(!) einen link setzen, um alle(!) blöcke mit id* auf einmal ein- bzw. auszublenden.

hat für diesen zweck jemand eine(n) lösungs(ansatz) parat?

  Profil   Editieren   Zitieren

Impigra
Pixelschubser


Beiträge: 9


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.


  Profil   Website   Editieren   Zitieren

languitar
Foren-Team


Beiträge: 2795


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.

---
Take a look here!
Lichtblick - Einblick - Ausblick

  Profil   E-Mail   Website   Editieren   Zitieren

subjective
Forenheld


Beiträge: 848


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).

---
Weaverslave

  Profil   Website   Editieren   Zitieren

diwie
Otto-Normal-Poster


Beiträge: 51


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"
    }  
  }
}

  Profil   Editieren   Zitieren

diwie
Otto-Normal-Poster


Beiträge: 51


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"
  }
 }
}



  Profil   Editieren   Zitieren
 

Antworten
Nach oben