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
Inhaltsverzeichnis
Normale Verwendung
Die grundsätzliche Verwendung ist, dass man irgendwo einen Link hat und weiter unten seinen Toggler, wo der ganze Inhalt drin ist. Den Link kann man mit dem TogglerLink erstellen, dazu einfach {{TogglerLink|nr=XYZ|text=Lasst mich den Text sehen!}}. 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.
|tabXYZ tabs}}
Das ganze würde dann übrigens so aussehen:
Lasst mich den Text sehen!
Text beim Klicken verändern
Wenn man will, kann man dem TogglerLink auch noch weitere Parameter migeben, z.B. einen anderen Text, falls man den Text gezeigt hat:
Willst du den Text sehen?
Das ganze sieht in der Umsetzung so aus:
{{TogglerLink|nr=ABC|textOpen=Gut, da hast du ihn|textClosed=Willst du den Text sehen?}}
{{Toggle||
Was wir jetzt hier anders gemacht haben ist, dem Toggler noch die Parameter ''textOpen'' und ''textClosed'' mitzugeben, also den Text im offenen und geschlossenen Zustand.
|tabABC tabs}}
Schwierigere Verwendung für Profis
Man muss aber nicht unbedingt die TogglerLink-Vorlage verwenden, viel mehr Freiheiten hat man, wenn man den Link selber generiert, dafür braucht man ein Span-Tag, das wie folgt aussieht: <span class="_toggler_show-tabXYZ">Zeige Text 1</span>, in der funktionsweise aber genau so funktioniert, mit dem feinen Unterschied, dass man damit noch einige andere Dinge schaffen kann.
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>
Es war einmal vor langer langer Zeit auf einem Server der Stupidedia...
{{toggle||
... da war der liebe {{CURRENTUSER}} sich gerade ein Tutorial über Toggles am Durchlesen. Nach der Lektüre verstand er alles, was er wissen musste. Ende
|tabWeiter tabs}}
Texte gezielt 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}}
Natürlich will man nicht immer, dass gleich alle Toggler wieder ausgeblendet werden. Alternativ kann man auch gezielt einzelne Texte ausblenden lassen, die anderen aber noch behalten, das sähe dann wie folgt aus:
Zeige Text 1,2,3
blende Text 1 aus
blende Text 2 aus
blende Text 3 aus
Hierzu muss man statt _toggler_hide-tabs einfach nur den oder spezifischen Tab(s) angeben, den/die man ausblenden will, beispielsweise _toggler_hide-tabA1. Natürlich kann man auch mehrere ausblenden bzw. mehrere einblenden, wie man in dem Beispiel gesehen hat, dafür einfach hinten dran noch ein _toggler_hide-tabXY bzw. _toggler_show-tabXY einfügen. Im Quelltext sehe das dann so aus:
<span class="_toggler_show-tabA1 _toggler_show-tabA2 _toggler_show-tabA3">Zeige Text 1,2,3</span>
<span class="_toggler_hide-tabA1">blende Text 1 aus</span>
<span class="_toggler_hide-tabA2">blende Text 2 aus</span>
<span class="_toggler_hide-tabA3">blende Text 3 aus</span>
{{toggle||Text 1|tabA1 tabs}}
{{toggle||Text 2|tabA2 tabs}}
{{toggle||Text 3|tabA3 tabs}}
Ein- UND ausblenden mit dem selben Link
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-tabAus _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>
