Andere Videos
Ein Spoiler ist ein Bereich der erscheint wenn man auf einen Text, bzw. auf ein Button klickt ohne das eine neue Seite geladen wird. Spoiler werden häufig in Foren verwendet um zu lange Beiträge Kürzer darzustellen, oder zu strukturieren. Aber auch auf Homepages können solche Spoiler ganz nützlich sein.
Um einen einfachen Spoiler auf der Homepage einzubinden verwendet man folgenden Java Script.
| <script type="text/javascript"><!-- function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'none') e.style.display = 'block'; else e.style.display = 'none'; } //--></script> |
Folgender Code ist der befehl zum ausklappen:
| <a onclick="toggle_visibility('Spoiler1');">Ausklapp Text</a> |
Nun folgender Code lässt sich der auszuklappende Inhalt anzeigen:
| <div id="Spoiler1" style="display:none;"> Wieder zu gebende Inhalt. </div> |
Wichtig ist, wenn man mehrere Spoiler auf eine Seite einbauen möchte, muss der rot makierte Text bei jedem Spoiler anders sein.
Beispiel:
Mit Hilfe von DIV Boxen läst sich der Spoiler gestalten.
| <a onclick="toggle_visibility('Spoiler1');"><div style="background: #eeeeee; border: 1px solid #e0e0e0; width: 300px; padding: 5px; margin: 5px;">Ausklapp Text</div></a> |
| <div id="Spoiler1" style="display:none;"><div style="background: #eeeeee; border: 1px solid #e0e0e0; width: 300px; padding: 5px; margin: 5px;"> Wieder zu gebende Inhalt </div> </div> |
Das ganze sieht dann so aus: