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:
|
7 x 11 Pixel 69 Byte |
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>