Mittwoch, 10. Februar 2010

Inhalte ausblenden

HTML-Seiten sind nach wie vor eine gute Wahl um schriftliche Informationen zugänglich zu machen:
Man kann den Text mit einem einfachen Editor schreiben, man kann Formatierungen setzen und das Dokument mit einem beliebigen Browser darstellen. Wird das Dokument zu aber lang, kann es schnell unübersichtlich werden.
Mit Hilfe von CSS und JavaScript läßt sich dieses Problem aber lösen: Man blendet Teile dynamisch ein oder aus.

Es ist ganz einfach: Wir haben immer eine Überschrift und einen zugehörigen Textblock. Alle Textblöcke sind mit einem "div" geklammert und werden über CSS global unsichtbar gemacht. Sichtbar sind nur die Überschriften - wir brauchen ja etwas das wir anklicken können. Wird nun eine Überschrift angeklickt, wird über JavaScript das folgende Element sichtbar oder wieder unsichtbar gemacht.

Jedes span- und div-Element muss eine beliebige, aber eindeutige ID haben und die zusammengehörigen Tags (Überschrift und folgender Textblock) dürfen weder durch ein Leerzeichen, noch einen Zeilenumbruch getrennt sein - dieses würde sonst als das erste Folge-Element (nextSibling) interpretiert, es würde nichts (erkennbares) passieren.

<span id="u120" onclick="mache(this);">Überschrift A</span><div id="t120">
Langer, langer Textblock...
</div></span>

<span id="u121" onclick="mache(this);">Überschrift B</span><div id="t211">
Noch ein langer, langer Textblock...
</div></span>

Das JavaScript ist nur ein paar Zeilen lang. Das CSS blendet alle Divs aus und hübscht die (zuerst) ausgeblendeten Blöcke ein wenig auf.

<style type="text/css">
    span{font-weight: bold; text-decoration: underline; cursor:help;}
    div {
        display: none;
        font-size: 1em; font-weight: normal;
        border-style: dashed; border-width: 1px; border-color: #aaaaaa;
        padding: 10px 10px 10px 10px;
    }
</style>
<script type="text/javascript">
    function mache(Element){
        var x = document.getElementById(Element.id).nextSibling;
        if(x.style.display == 'block')
         { x.style.display = 'none'; }
        else
         { x.style.display = 'block'; };
    };
</script>
Das JavaScript und das CSS können beliebig auf der Seite platziert werden.

Keine Kommentare:

Kommentar veröffentlichen