mehrere layer dynamisch ein-/ausblenden

D

dPo2000

Hi,

ich habe meinen Freund :google: befragt aber keine befriedigenden Antworten bekommen. Nun hoffe ich auf eure Hilfe! Kann mir jemand erklären wie ich mit Javascript + CSS mehrere Ebenen mit einer ID dynamisch ein- bzw. ausklappen lassen kann?

Mein Quellcode bis jetzt:

HTML:
---HEAD---

<script type="text/javascript">
function toggledisplay (id){
  if (document.getElementById) {
    var mydiv = document.getElementsById(id);
    mydiv.style.display = (mydiv.style.display=='block'?'none':'block');
  }
}
</script>

---/HEAD---

---BODY---

<div id="hiddendiv">Versteckter GEHEIMTEXT HAHA</div>

<a href="#" onClick="javascript:toggledisplay('hiddendiv'); return false" title="Versteckten Absatz anzeigen/verstecken">Versteckten Text anzeigen...</a>

---/BODY---

Zur Zeit ist es so, das wenn ich mehrere DIV's habe mit der ID "hiddendiv" nur die erste DIV Ebene ein- und ausgeklappt wird. Es sollen aber alle ein- bzw. ausklappen...

Danke für eure Zeit & Hilfe!
 
Zuletzt bearbeitet von einem Moderator:
Nach html-Standard soll eine id eindeutig sein, also nur einmal im Dokument vorkommen, daher denke ich wird das nicht möglich sein.
Über name statt id müsste es klappen. getElementsByName() liefert Dir ein Array zurück, welches Dir alle Elemente mit diesem Namen auflistet. Das kannst Du in einer Schleife durchlaufen und Deinen Code auf jedes Element mit diesem Namen anwenden.
Irgendwo bei selfhtml gibt es, glaube ich, auch ein Beispiel dazu.

Gruß hpvw
 
Mit einem Namen statt der ID klappt es nicht....da ein <div> lt.HTML kein "name"-Attribut hat.

Du kannst das mit der mehrfach vergebenen ID so lassen....
gehe alle <div>'s durch(document.getElementsByTagName('div')).... und prüfe die ID


Alternativ kannst du den <div>'s auch einen Klassennamen verpassen, und diesen prüfen.... der ist mehrfach erlaubt.
 
Sorry Sven hat recht, das habe ich nicht bedacht.
Aber bei Svens Variante dürfte der Validator im Dreieck springen oder etwa nicht?
Dann würde ich doch mit id arbeiten und mir selbst für die Gruppierung von den div's eine "Syntax" überlegen.
Vielleicht mit einem Prefix:
"versteckterTitel1"
"versteckterInhalt1"
oder etwas dynamischer:
1_1
1_2
1_3
Dann müsstest Du in einer Schleife die übergebene id 1 in einem String mit der Laufvariablen verbinden, bis getElemtByID Dir null liefert.

Gruß hpvw
 
Vielleicht hilft dir ja auch der andere Thread von Letztens weiter, obwohl der auch dein Problem mit den vielen divs nicht löst. Wenn nicht, zu dem Thema mit for-Schleife alle divs durchgehen und so nur bestimmte divs verändern gabs auch schon vor einiger Zeit mal was im Forum...
 
Zuletzt bearbeitet:
Aber bei Svens Variante dürfte der Validator im Dreieck springen oder etwa nicht?

Seit wann gibts denn Validatoren für JS :suspekt:

Um mich zu rehabilitieren... ich hatte ja auch angefügt, dass man statt ID die "class" nehmen kann... das ist das Selbe in grün... nur valider:)

Code:
function toggledisplay(strClassName)
{
  if(document.getElementsByTagName) 
    {
        for(j=0; j<document.getElementsByTagName('div').length; ++j)
            {
                if(document.getElementsByTagName('div')[j].className=='hiddendiv')
                    {
                        document.getElementsByTagName('div')[j].style.display = 
                            (document.getElementsByTagName('div')[j].style.display=='block')
                                ?'none'
                                :'block';
                     }
            }
     }
}
 
Seven Mintel hat gesagt.:
Du kannst das mit der mehrfach vergebenen ID so lassen....
gehe alle <div>'s durch(document.getElementsByTagName('div')).... und prüfe die ID
Den Teil meinte ich und natürlich den html-Validator :p
Das mehrfache Zuweisen von der gleichen class ist natürlich valide.
Aber dasselbe in grün ist es nicht ganz. class weißt schließlich "nur" eine Gestaltungsklasse zu und id einen eindeutigen Bezeichner.
Und bei dem "eindeutig" liegt ja genau der Knackpunkt...

Sven, Du bist rehabilitiert :)

Gruß hpvw
 
Hey,

Ein Danke an Alle für die Hilfe und die Tipps!
Der letzte Beitrag hat mir geholfen!
 
Zurück