Materialien zum Unterricht
Boxen ein- und ausblenden
Mit Hilfe von JavaScript lassen sich Boxen (div) einfach ein- und ausblenden. Am rechten Rand wird durch diesen eine Box eingeblendet.
Jedes Element auf einer HTML-Seite hat die Eigenschaft display. Damit kann man festlegen, ob ein Element angezeigt wird oder nicht. Dazu sind folgende Angaben möglich:
block = Erzwingt einen Block - das Element erzeugt eine neue Zeile.
inline = Erzwingt die Anzeige im Text - das Element wird im laufenden Textfluss angezeigt.
none = Element wird nicht angezeigt und es wird auch kein Platzhalter freigelassen.
Das ganze soll an einem Beispiel erprobt werden.
Erzeuge in einer neuen HTML-Datei zwei Bereiche, die nebeneinander stehen. (<div> mit float...) In jeden div-Tag kommt der Eintrag
style="display:block;"Jeder Bereich braucht eine ID, damit er über eine JavaScript-Funktion ansprechbar ist. (z.B. box1 und box2)
Damit werden beide Bereiche erst einmal angezeigt. Ersetzt man nun in einem Bereich block durch none, steht der Bereich zwar noch im Quelltext, erscheit aber nicht im Fenster.
In dem sichtbaren Fenster wird ein Button erzeugt, der beim Klicken die Funktion
box_zeigen()
aufruft. In der Funktion verschafft man sich mit getElementById() Zugriff auf die Box und weist dem Attribut display dann einfach den Wert block zu. Damit erscheint die Box.
In der Box kann nun ein zweiter Button erzeugt werden, der eine Funktion zum Verstecken der Box aufruft.
