✔ mehrere layer dynamisch ein-/ausblenden

[dPo2000]

Hi,

ich habe meinen Freund 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:

---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!

 

[hpvw]

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

 

[Sven Mintel]

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.

 

[hpvw]

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

 

[con-f-use]

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

 

[Sven Mintel]

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

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';
                     }
            }
     }
}

 

[hpvw]

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

 

[dPo2000]

Hey,

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