Horst Reinelt: Mehrere DHTML-Bereiche mit document.getElementById?

Hallo liebe Forumler!

Eine Aufgabe an alle JavaScript- und DHTML-Experten - mein Knobeln war bis jetzt erfolglos.

Die Funktion ist auf im Seiten-Head wie folgt definiert:

function ShowHideCheck(x) {
 textstatus = (document.getElementById(x).style.display == 'block') ? 'none' : 'block';
 document.getElementById(x).style.display = textstatus;
}

Im Body dann der Aufruf und der DHTML-Bereich:

<input type="checkbox" value="0" onClick="JavaScript:ShowHideCheck('ID1');">

<span id="ID1" class="showhide" style="display:block">
<h1>INHALT</h1>
</span>

Soweit so gut - klappt hervorragend. Jetzt möchte ich aber gerne mehrere solcher Bereiche bedienen, ähnlich wie:

<input type="checkbox" value="0" onClick="JavaScript:ShowHideCheck('ID1');">

<span id="ID1" class="showhide" style="display:block">
<h1>INHALT</h1>
</span>

<h2>was ganz anders</h2>

<span id="ID1" class="showhide" style="display:block">
<h1>NOCHN INHALT</h1>
</span>

Zweimal die gleiche id ist sicherlich nicht so gut, aber was sonst? Mit "document.getElementsByName(x)" ist es auch nicht machbar.

Hat jemand eine Idee?

Dankeschön schonmal vorab!

Horst

  1. Zweimal die gleiche id ist sicherlich nicht so gut, aber was sonst? Mit "document.getElementsByName(x)" ist es auch nicht machbar.

    Entweder übergibst Du eine Collection an Elementen, oder Du schreibst dir selbst eine getElementsByClassName() (und regelst es über den Klassennamen), oder verwendet für die ID eine Namenskonvention, gegen die Du überprüfst (z.B. ID fängt mit "karlaugust" an).

    In jedem Fall ist getElementsByTagName() Dein Freund...

    1. Hi!

      oder Du schreibst dir selbst eine getElementsByClassName() (und regelst es über den Klassennamen),

      So hab ichs gemacht und es geht. Super toll! Vielen Dank!

      Ciao
        Horst

  2. hi,

    <input type="checkbox" value="0" onClick="JavaScript:ShowHideCheck('ID1');">

    javascript: hat in einem eventhandler immer noch nichts verloren.

    <span id="ID1" class="showhide" style="display:block">
    <h1>INHALT</h1>
    </span>

    span als inline element darf keine block level elemente wie überschriften enthalten.

    gruss,
    wahsaga

    1. Hallo.

      javascript: hat in einem eventhandler immer noch nichts verloren.

      ...

      span als inline element darf keine block level elemente wie überschriften enthalten.

      Hm, ja, hast natürlich recht. Das eine war ein Schreibfehler und das andere einfach ein falsches Beispiel.

      Aber apropos erlaubte Elemente: Gibt es eine Möglichkeit, dies innerhalb einer Tabelle anzuwenden (womöglich im <tr>), um einzelne Zeilen ein/auszublenden? Naja, erlaubt isses sicherlich nicht ...

      Grüße
        Horst

  3. Hi,

    Soweit so gut - klappt hervorragend. Jetzt möchte ich aber gerne mehrere solcher Bereiche bedienen, ähnlich wie:

    Eine passende Routine gibt's unter http://Coding.vampirehost.de/Toggle. Ich hatte sie in http://forum.de.selfhtml.org/archiv/2004/3/76545/#m441072 hier vorgestelllt ...

    Gruß, Cybaer