Zum Inhalt

Inhaltsverzeichnis • Teil 2 - Fortgeschritten • Fortgeschrittene Methoden • Absätze einblenden
⇦ Stylesheet umschalten / Anfahrt (OSM) ⇨
23.07.2014 19:28:53

Absätze einblenden

Dateien: index.html, toggleDiv.js

Vorbemerkung

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.

Absätze ausblenden

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!

Editor - index.html
    /* Absätze einblenden (function toggleDiv(myDiv)) */
    #Absatz1 { display:none; }
    #Absatz2 { display:none; }

Absätze einblenden

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.

Editor - index.html
    <!-- Absatz 1 einblenden -->
      <a href="%%1%%">
        mehr ...
      </a>
    </p>
    <div id="Absatz1">

JavaScript

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.

Zusammenfassung

⇦ Stylesheet umschalten / Anfahrt (OSM) ⇨
Nach oben