Containerscript (Javascript)

Viele Webmaster kennen das Problem der Masse der Inhalte und dem geringen Platz der einem zur Verfügung steht. Um alle Inhalte einigermaßen strukturiert rüberzubringen benötigt man ein hilfreiches Konzept. Hierbei kann auch ein Container hilfreich sein, der nach Belieben des Besuchers einfach aus- und  eingeklappt werden kann. Das Endergebnis dieses Tutorials sieht so aus:

Ich bin sichtbar!(Klick mich!)

Ich bin nicht sichtbar!

1. Schritt: Anlegen der DIVs

Zu Beginn benötigen wir zwei Blöcke:

• ist_sichtbar-Div: Dies ist das Objekt welches bereits sichtbar ist und beim Anklicken die Funktion aufruft, die den anderen Block anzeigt.
• mach_sichtbar-Div: Dieses Objekt ist noch nicht sichtbar und wird durch „ist_sichtbar” sichtbar gemacht.

Folgender Code muss natürlich zwischen den Body-Tags platziert werden:

 <div id="ist_sichtbar">Ich bin sichtbar!</div>
<div style="display: none" id="mach_sichtbar">
Ich bin nicht sichtbar!
</div> 

Hierbei wird wird mach_sichtbar über das Style-Attribut display: none  nicht sichtbar gemacht.

2. Schritt: Javascript-Funktion

Wie bereits erwähnt, kann man mit HTML alleine keine Interaktivität erzeugen, sondern muss bspw. Javascript einsetzen. Die nachfolgende Funktion hat die Aufgabe, mach_sichtbar beim Klick auf ist_sichtbar sichtbar zu machen und bei einem erneuten Klick wieder nicht sichtbar zu machen.

 <script language="javascript" type="text/javascript">
function sichtbar_machen(){
    var mach_sichtbar = document.getElementById("mach_sichtbar");
    var ist_sichtbar = document.getElementById("ist_sichtbar");
    if (mach_sichtbar.style.display == "none"){
        mach_sichtbar.style.display = "block";
    } else {
        mach_sichtbar.style.display = "none";
    }
}
</script> 

Um nun allerdings die Funktion beim Klick auf ist_sichtbar auszuführen, muss man ist_sichtbar um ein onclick-Attribut erweitern, dass den Verweis auf die entsprechende Funktion enthält:

 <div id="ist_sichtbar" onclick="sichtbar_machen()">Ich bin sichtbar!</div>  

3. Schritt: Der vollständige Code

 <script language="javascript" type="text/javascript">
function sichtbar_machen(){
    var mach_sichtbar = document.getElementById("mach_sichtbar");
    var ist_sichtbar = document.getElementById("ist_sichtbar");
    if (mach_sichtbar.style.display == "none"){
        mach_sichtbar.style.display = "block";
    } else {
        mach_sichtbar.style.display = "none";
    }
}
</script>
<div id="ist_sichtbar" onclick="sichtbar_machen()">Ich bin sichtbar!</div>
<div id="mach_sichtbar" style="display: none;">Ich bin nicht sichtbar!</div>