Toggle Elements
Javascript Demonstration und Test

Auf dieser Seite werden die Javascript-Funktionen toggleVisB() und toggleVisI()
demonstriert, getestet und erklärt.

toggleVisB

Die Javascript-Funktion toggleVisB() ist für das Ein- und Ausblenden eines Block-Elements vorgesehen und wechselt die CSS-Eigenschaft display zwischen none und block.

Wenn Du auf die Schaltfläche An/Aus klickst, dann erscheint unten ein neuer Absatz, der die Funktionalität der Javascript-Routine toggleVisB() zeigt.

toggleVisB() funktioniert korrekt.
Klicke zum Ausblenden nochmals auf An/Aus (gerne auch in diesem Absatz).

toggleVisI

Die Funktion toggleVisI() wechselt die CSS-Eigenschaft display zwischen none und inline und dient dazu, ein Inline-Element ein- und auszublenden.

Klicke auf die Schaltfläche Toggle, um diese Funktion ebenfalls zu testen.
Dann erscheint hier ein anderer Wortlaut.an dieser Stelle der Alternativtext.

Das funktioniert natürlich auch für Elemente mit den Inline-Javascript-Attributen onmouseover() und onmouseout().

Bewege die Maus über das Fragezeichen-Symbol .

Beim Hovern sollte dieser Absatz erscheinen und beim Verlassen des Symbols wieder verschwinden.

Noch ein Test:
Bewege die Maus waagerecht über die folgende Reihe von Sternen.
Die Anzeige sollte flimmern...   flimmer... 

Der Code

Zum Verständnis kannst Du die beiden Funktionen toggleVisB() und toggleVisI() anzeigen, indem Du hier klickst.

function toggleVisB(b)
{
 var a = document.getElementById(b).style;
 a.display = (a.display == "block" ? "none" : "block")
}

function toggleVisI(b)
{
 var a = document.getElementById(b).style;
 a.display = (a.display == "inline" ? "none" : "inline")
}
©2014 by GEGSOFT

Die Alternative

Ganz oben auf dieser Seite (im Tipp) ist die Rede von den komplementären Funktionen show() und hide().
Diese arbeiten nicht mit der CSS-Eigenschaft display, sondern mit dem HTML-Attribut hidden.
Außerdem gibt es noch die Funktion alth(), die das hidden-Attribut abhängig von seinem Zusatnd setzt bzw. löscht.
Das Besondere an diesen drei Funktionen ist, dass man ihnen beliebig viele Elemente übergeben kann.
Sie können also auch
alth('elm01','elm02','elm03') schreiben, um die Sichtbarkeit aller angegebenen Elemente mit einer Anweisung umzuschalten.
Als kürzere Schreibweise anstellen von alth() kannst du auch alth() (alternate hidden) schreiben.
Der Wechsel des gelben Wortes in diesem Absatz und der folgende Code-Block benutzen diese Funktion.

Klicke auf diese Schaltfläche, um sie anzuzeigen.

function hide()
{
 for(var n = 0; n < arguments.length; n++)
  document.getElementById(arguments[n]).setAttributeNode
(document.createAttribute("hidden"))
}

function show()
{
 for(var n = 0; n < arguments.length; n++)
  document.getElementById(arguments[n]).removeAttribute
("hidden")
}

function alth()
{
 for(var n = 0; n < arguments.length; n++)
 {
  var a = document.getElementById(arguments[n]);
  if(a.getAttribute(m) == null)
   a.setAttributeNode(document.createAttribute("hidden"));
  else
   a.removeAttribute("hidden")
 }
}
©2014 by GEGSOFT

Zurück   |   Startseite  |  Kontakt