Dateien: index.html, toggleDiv.js
Das Ein- und Ausblenden von Elementen auf Webseiten ist zwar ein interessanter Effekt. Stellt aber für manche Nutzer durchaus eine Barriere dar und sollte deshalb nur sparsam eingesetzt werden.
Im Quelltext der Hauptseite findet sich dazu zunächst innerhalb der internen Stylesheets zwei Definitionen #Absatz1 {display:none;} und #Absatz2 {display:none;}. Die Eigenschaft display:none; verhindert das Anzeigen des so formatierten Tags. Die Defintion auf der Seite ist durchaus gewollt, da das Verstecken der Absätze ja auch nur für diese Seite gilt!
/* Absätze einblenden (function toggleDiv(myDiv)) */
#Absatz1 { display:none; }
#Absatz2 { display:none; }
Um sie wieder einzublenden, findet sich der Aufruf der JS-Funktion toggleDiv() mit dem Parameter „Absatz1“ oder „Absatz2“ jeweils vor dem versteckten Absatz. Bitte beachten sie, dass der Parameter und die id="" übereinstimmen müssen.
Anmerkung: Hier macht übrigens wieder eine „ID“ Sinn, da sich das Ein-/Ausblenden jeweils nur auf einen bestimmten Absatz auswirken soll.
<!-- Absatz 1 einblenden -->
<a href="%%1%%">
mehr ...
</a>
</p>
<div id="Absatz1">
In der Datei vorlagen/toggleDiv.js ist diese Funktion definert. Sie manipuliert den Wert display: zwischen "" (leer) und block. Der leere Wert provoziert das Standardverhalten (hidden) aus dem Stylesheet und block ist der Standardwert für ein <div> (Blockelement). Damit zeigt block den <div> an.