Seiteninhalt mit JavaScript verstecken und wieder anzeigen

Manchmal wird eine Funktion benötigt um Texte, Bilder, etc. erst anzuzeigen wenn der Benutzer auf einen Link klickt. Um die JavaScript-Funktion aufzurufen die den Inhalt verstecken oder anzeigen soll wird das Event-Handler Attribut: onClick verwendet. Damit die Funktion mehrmals auf der Seite ausgeführt werden kann wird eine ID übergeben.

Das Blindtextchen - Anzeigen/Verstecken

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
function mehr(ID) {
 if (document.getElementById(ID).style.display=="none") {
  document.getElementById(ID).style.display="block";
 }
 else {
  document.getElementById(ID).style.display="none";
 }
}
</script>

<p><b>Das Blindtextchen</b> - 
<span class="mehr" onClick="mehr('eins')">Anzeigen/Verstecken</span></p>

<div id="eins" style="display: none;">
Weit hinten, hinter den Wortbergen, <br>
fern der Länder Vokalien und Konsonantien <br>
leben die Blindtexte. Abgeschieden wohnen Sie <br>
in Buchstabhausen an der Küste des Semantik, <br>
eines großen Sprachozeans...
</div>

eins = ID - Für jeden DIV-Block muss eine eigene ID verwendet werden.

Eine ID muss mit einem Buchstaben beginnen (A-Za-z). Jedes weitere Zeichen kann ein Buchstabe, eine Ziffer (0-9), ein Bindestrich-Minus (-) oder ein Unterstrich (_) sein. Außerdem darf eine ID keine deutschen Umlaute (ä,ö,ü, …), Leerzeichen oder Sonderzeichen enthalten.

Linktext ändern

Den Linktext beim anklicken ändern.

Das Blindtextchen - Anzeigen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
function zeige(ID,TID) {
 if (document.getElementById(ID).style.display=="none") {
  document.getElementById(ID).style.display="block";
   document.getElementById(TID).innerHTML="Verstecken";
 }
 else {
  document.getElementById(ID).style.display="none";
  document.getElementById(TID).innerHTML="Anzeigen";
 }
}
</script>

<p><b>Das Blindtextchen</b> - 
<span class="mehr" id="zweiT" onClick="zeige('zwei','zweiT')">Anzeigen</span></p>

<div id="zwei" style="display: none;">
Weit hinten, hinter den Wortbergen, <br>
fern der Länder Vokalien und Konsonantien <br>
leben die Blindtexte. Abgeschieden wohnen Sie <br>
in Buchstabhausen an der Küste des Semantik, <br>
eines großen Sprachozeans...
</div>

Da es sich bei dem Funktionsaufruf um keinen echten Link handelt, muss mit Hilfe von CSS ein Link simuliert werden.

<style>
span.mehr {
 color: Royalblue;
 cursor: Pointer;
}
span.mehr:hover {
 color: Crimson;
}
</style>

Grafik ändern

Die Grafik beim anklicken ändern.

Das Blindtextchen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
function zeige_mehr(ID,BID) {
 if (document.getElementById(ID).style.display=="none") {
  document.getElementById(ID).style.display="block";
   document.getElementById(BID).src="img/unten.gif";
 }
 else {
  document.getElementById(ID).style.display="none";
  document.getElementById(BID).src="img/rechts.gif";
 }
}
</script>


<p><img src="img/rechts.gif" alt="" id="dreiB"> 
<span class="mehr" onClick="zeige_mehr('drei','dreiB')"><b>Das Blindtextchen</b></span></p>

<div id="drei" style="display: none;">
Weit hinten, hinter den Wortbergen, <br>
fern der Länder Vokalien und Konsonantien <br>
leben die Blindtexte. Abgeschieden wohnen Sie <br>
in Buchstabhausen an der Küste des Semantik, <br>
eines großen Sprachozeans...
</div>

Verwendete Grafiken:

rechts.gif
7 x 11 Pixel
69 Byte
unten.gif
11 x 7 Pixel
68 Byte

Inhalt über den Seiteninhalt legen

Bei diesem Script wird Inhalt über den Seiteninhalt gelegt. Um das ganze etwas hervorzuheben, wird CSS box-shadow verwendet » CSS-Boxen mit Schatten.

Das Blindtextchen - Anzeigen

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script>
function zeige_viel_mehr(ID,TID,BID) {
 if (document.getElementById(ID).style.display=="none") {
  document.getElementById(ID).style.display="block";
   document.getElementById(TID).innerHTML="Verstecken";
   document.getElementById(BID).src="img/unten.gif";
 }
 else {
  document.getElementById(ID).style.display="none";
  document.getElementById(TID).innerHTML="Anzeigen";
  document.getElementById(BID).src="img/rechts.gif"; 
 }
}
</script>

<p><b>Das Blindtextchen</b> - <img src="img/rechts.gif" alt="" id="vierB">
<span class="mehr" id="vierT" onClick="zeige_viel_mehr('vier','vierT','vierB')">Anzeigen</span></p>

<div id="vier" class="hervorheben" style="display: none;">
Weit hinten, hinter den Wortbergen, <br>
fern der Länder Vokalien und Konsonantien <br>
leben die Blindtexte. Abgeschieden wohnen Sie <br>
in Buchstabhausen an der Küste des Semantik, <br>
eines großen Sprachozeans...
</div>

Der versteckte Inhalt muss mit CSS Absolut positioniert werden position: absolute. Außerdem muss mit background-color eine Hintergrundfarbe hinzugefügt werden, da der dahinter liegende Seiteninhalt nicht durchscheinen soll. 

<style>
span.mehr {
 color: Royalblue;
 cursor: Pointer;
}
span.mehr:hover {
 color: Crimson;
}

div.hervorheben {
 position: absolute;
 background-color: #FFFFFF;
 box-shadow: 1px 3px 10px Salmon;
 padding: 5px;
}
</style>