Hilfe:Toggler
Die Toggler Vorlage ist dazu da, um auf Benutzerseiten, aber auch normalen Artikeln Inhalt per Knopfdruck einblenden zu lassen. Das ganze kann zum Beispiel verwendet werden, um eine einfache Navigation aufzubauen, hier ein Beispiel dazu:
Meine Bilder
Meine Artikel
Die grundsätzliche Verwendung ist, dass man irgendwo einen Link hat und weiter unten seinen Toggler, wo der ganze Inhalt drin ist. Der Link sollte ungfähr so aussehen <span class="_toggler_show-XYZ">Lasst mich den Text sehen!</span>. Das XYZ ist hierbei sehr wichtig, da es sozusagen die Id des Toggles ist, die man ansprechen will. Diese Id braucht man dann weiter unten, wo man den Toggler wieder anzeigen will, und zwar so:
{{toggle||
Hier drin ist jetzt der Text, oder alles was man in einem Toggler verstecken will angegeben und bleibt so lange ausgeblendet, bis man auf den zugehörigen Link klickt.
|XYZ tabs}}
Das ganze würde dann übrigens so aussehen:
Lasst mich den Text sehen!
Schwierigere Verwendung für Profis - Bilder als Toggler verwenden
Es kann natürlich gut sein, dass man auch Bilder als Toggler verwenden will, was natürlich um einiges schöner aussieht, als banale links und nicht besonders anders in der Umsetzung ist. Hierzu ein Beispiel:
Es war einmal vor langer langer Zeit auf einem Server der Stupidedia...
Um das umzusetzen, kann man in die span-Tags auch Bilder einfügen, die als Toggler dienen. Wichtig ist einfach das |link= im Bild, damit man beim Klick auch auf der Seite bleibt. Im Fall von vorher sah der Link also wie folgt aus:
<span class=" _toggler_show-tabWeiter">[[Datei:Suivant.png|100px|link=]]</span>
Schwierigere Verwendung für Profis - Ausblenden
Meist will man beim toggeln die anderen toggles gerne wieder ausblenden, damit man nicht eines nach dem anderen untereinander auflistet, sondern nur das sieht, das man gerade angewählt hat. Um das erreichen zu können, muss man in sein Span-Tag nur ein _toggler_hide-tabs in die class einfügen, das funktioniert dann wie folgt:
Zeige Text 1
Zeige Text 2
Zeige Text 3
Und sieht im Code so aus:
<span class="_toggler_hide-tabs _toggler_show-tab1">Zeige Text 1</span>
<span class="_toggler_hide-tabs _toggler_show-tab2">Zeige Text 2</span>
<span class="_toggler_hide-tabs _toggler_show-tab3">Zeige Text 3</span>
{{toggle||Text 1|tab1 tabs}}
{{toggle||Text 2|tab2 tabs}}
{{toggle||Text 3|tab3 tabs}}
Schwierigere Verwendung für Profis - Aus und einblenden
Dank dieser Ausblendefunktion kann man jetzt einen kleinen Trick verwenden, der den Anschein erweckt, dass ein Link den Text aus und wieder einblenden kann, was dann so aussehen würde:
PS: falls der Link verschwunden ist: hier klicken, liegt am Ausblenden der oberen Texte
einblenden
Im Grunde genommen machen wir nichts anderes, als ein Div zu machen, wo der ausgeblendete Text drin ist, das im style das attribut display: none beinhaltet, was das ganze unsichtbar macht. In diesem Div drin ist dann oben dran ein weiterer Link mit dem Namen "ausblenden", der das erste Tab mit dem einblenden-Link wieder zeigt. Falls das jetzt zu technisch war, sieht man hier das Ganze als Quelltext:
<div class="_toggle tabAus tabs">
<span class="_toggler_hide-tabs _toggler_show-tabEin">einblenden</span>
</div>
<div class="_toggle tabEin tabs" style="display: none">
<span class="_toggler_hide-tabs _toggler_show-tabAus">ausblenden</span>
eingeblendeter Inhalt
[[Datei:Beispiel.jpg|thumb|200px|eingeblendetes Bild]]
</div>
