Ein- und ausklappbare Inhalte

In diesem Artikel beschreiben wir dir, wie du ein- und ausklappbare Inhalte in Wikibooks realisieren kannst. Hierfür gibt es im wesentlichen zwei Möglichkeiten: Navigationsleisten und einklappbare HTML-Elemente. Beide Beispiele basieren auf JavaScript. Damit du also die folgenden Beispiele nachvollziehen kannst, muss JavaScript in deinem Browser eingeschaltet sein. Dies bedeutet aber auch, dass der Leser bei sich JavaScript aktiviert haben muss, wenn du ein- und ausklappbare Inhalte in deinem Buch realisieren möchtest.

Navigationsleisten

Navigationsleisten kennst du vielleicht aus der Wikipedia. Hier werden sie zur Navigation zwischen Artikel innerhalb einer geschlossenen Themengruppe eingesetzt. Eine Navigationsleiste zu den Bezirken Hamburgs könnte beispielsweise so aussehen:

Bezirke in Hamburg

Siehe auch

Hilfeseite „Navigationsleisten“

Abstellbereich

Alter Quellcode von Aufgabensammlung: Vorlage:Klapptext

<div class="NavFrame" style="display: block; border: 0px none; border-collapse: inherit; padding: 0px; text-align: left; font-size: medium; clear: none;">
<div class="NavHead" style="background-color: #FFFFFF; font-weight: normal; font-size: 0.8em; margin: 0.4em 0 0.5em;">{{#if: {{{typ|}}}|''[[Aufgabensammlung Mathematik: Über diese Aufgabensammlung#Anker:Klapptexte{{!}}{{{typ}}}:]] {{{kopf}}}''|{{{kopf}}}}}</div>
<div class="NavContent" style="font-size: 0.8em;">
{{{inhalt}}}
</div>
<div class="NavEnd" style="clear: none; line-height: 0px;">&nbsp;</div>
</div>

Alter Code von „Mathe für Nicht-Freaks: Unsichtbare Frage“

<div class="NavFrame" style="display:none;">&nbsp;</div>

Wiki-Code für den Link, um eine Seite als PDF herunterzuladen

[{{VOLLSTÄNDIGE_URL:Spezial:Buch|bookcmd=render_article&arttitle={{URLENKODIERT:{{HAUPTSEITE}}|QUERY}}&oldid={{REVISIONID}}&writer=rl}} Diese Seite als PDF herunterladen]

Social Web Links

[[File:Twitter.svg|verweis=http://twitter.com/share?url={{URLENKODIERT:{{VOLLSTÄNDIGE_URL:{{SEITENNAME}}}}}}&text={{URLENKODIERT:{{SEITENNAME}}|QUERY}}|23px|Twitter]]
[[File:Facebook icon.svg|verweis=http://www.facebook.com/sharer.php?u={{URLENKODIERT:{{VOLLSTÄNDIGE_URL:{{SEITENNAME}}}}}}|23px|Facebook]]
[[File:Delicious.svg|verweis=http://delicious.com/post?url={{URLENKODIERT:{{VOLLSTÄNDIGE_URL:{{SEITENNAME}}}}}}&title={{URLENKODIERT:{{SEITENNAME}}|QUERY}}|23px|del.ico.us]]
[[File:Stumbleupon.svg|verweis=http://www.stumbleupon.com/submit?url={{URLENKODIERT:{{VOLLSTÄNDIGE_URL:{{SEITENNAME}}}}}}&title={{URLENKODIERT:{{SEITENNAME}}|QUERY}}|23px|Stumbleupon]]
[[File:Reddit.svg|verweis=http://reddit.com/submit?url={{URLENKODIERT:{{VOLLSTÄNDIGE_URL:{{SEITENNAME}}}}}}&title={{URLENKODIERT:{{SEITENNAME}}|QUERY}}|23px|Reddit]]
[[File:Digg.svg|verweis=http://digg.com/submit?phase=2&url={{URLENKODIERT:{{VOLLSTÄNDIGE_URL:{{SEITENNAME}}}}}}&title={{URLENKODIERT:{{SEITENNAME}}|QUERY}}|23px|Digg]]
[[File:Friendfeed.svg|verweis=http://friendfeed.com/?url={{URLENKODIERT:{{VOLLSTÄNDIGE_URL:{{SEITENNAME}}}}}}&title={{URLENKODIERT:{{SEITENNAME}}|QUERY}}|23px|Friendfeed]]
[[File:Newsvine.svg|verweis=http://www.newsvine.com/_tools/seed&save?u={{URLENKODIERT:{{VOLLSTÄNDIGE_URL:{{SEITENNAME}}}}}}&h={{URLENKODIERT:{{SEITENNAME}}|QUERY}}|23px|Newsvine]]