Hilfe:Toggle

Wechseln zu: Navigation, Suche

Toggler bieten euch die Möglichkeit, einzelne Bereiche in Texten beim Klicken eines Links oder auch eines Buttons anzuzeigen oder zu verbergen. Dadurch können Seiten besser geordnet, und somit überlange Seiten vermieden werden. Auf Englisch gibt es diese Hilfe ebenfalls, und zwar hier.

Inhaltsverzeichnis 1 Funktionsweise 2 Toggler 2.1 Beispiel 1 2.2 Beispiel 2 3 Togglegroups 3.1 Beispiel 4 Toggler in Tabellen 5 Spoiler in Tabellen

Funktionsweise

Der Toggler bietet die Möglichkeit, einzelne Texte durch einen Schalter ein- und auszuklappen. Damit jedoch nichts verwechselt wird, muss der Toggler zuerst mit einem Namen versehen werden. Ausserdem definiert "Text" den Bereich, den der Toggler später umfassen soll.

<div class="NAME"> "Text" </div>

Um einen Text zunächst nicht anzuzeigen, ist eine weitere Option notwendig:

<div class="NAME" style="display:none;"> "Text" </div>

Dadurch wird der Toggler zunächst nicht angezeigt, kann jedoch nicht angezeigt werden, da der nötige Schalter dazu noch fehlt.

Toggler

Um nun einen solchen Bereich zu verbergen, bzw. anzuzeigen, muss noch ein sogenannter Toggler, also ein Schalter für den jeweiligen Bereich angelegt werden.

<span class="_toggler-NAME">Dieser Text ist der Schalter</span>

Das "NAME" muss natürlich vorher durch den zuvor festgelegten Togglernamen ersetzt werden. Dadurch wird sämtlicher Text in Bereichen der Klasse "NAME" umgeschaltet.

Darüber hinaus gibt es noch weitere Togglerklassen, die die Funktion weiter spezifizieren:

• _toggler_show-(Name)

(Zeigt alle Bereiche mit entsprechendem Namen an, verbirgt sie allerdings nicht.)

• _toggler_hide-(Name)

(Verbirgt alle Bereiche mit entsprechendem Namen, zeigt sie allerdings nicht an.)

• _toggler_reset-(Name)

(Setzt alle Bereich auf ihre ursprüngliche Anzeige zurück.)

Es ist auch möglich, dass ein Bereich, der als Toggler definiert ist, selbst umgeschaltet werden kann. Dies ermöglicht bspw. das ändern des Textes, nachdem ein Link angeklickt wurde.

Beispiel 1

Gebt ihr zum Beispiel folgendes ein:

<span class="_toggler-SCHALTER1"> Dieser Text ändert den Zustand des Bereichs "Schalter1"</span>
<div class="SCHALTER1"> Text </div>
<div class="SCHALTER1" style="display:none;"> anderer Text </div>

Wird es folgendermaßen dargestellt:

Dieser Text ändert den Zustand des Bereichs "Schalter1"

Beispiel 2

<span class="_toggler_show-zeigen _toggler_hide-verbergen verbergen" style="display:none;">Text zeigen</span>
<span class="_toggler_show-verbergen _toggler_hide-zeigen zeigen">Text verbergen</span>

<div class="zeigen">Text wird angezeigt, dazu noch zusätzlicher Text</div>
<div class="verbergen" style="display:none;">Text wird angezeigt</div>

Text zeigen Text verbergen

Togglegroups

Um komplette Bereiche ohne Angabe eines Namens zu umzuschalten steht die Möglichkeit zur Verfügung, eine sog. Togglegroup, also eine Togglegruppe zu definieren. Um eine Togglegroup zu erstellen, muss in der Klassendefintion des entsprechenden Togglers das Attribut _togglegroup eingefügt werden. Bereiche, die zur Togglegroup gehören sollen, benötigen das Attribut _toggle in ihrer Klassendefinition, allerdings keinen weiteren Namen.

Beispiel

<span class="_togglegroup _toggler">Schalter für den Text in der Togglegroup</span>

<div class="_toggle">Text, der geschaltet wird</div>
<div class="_toggle" style="display:none;">Text, der am Anfang verborgen ist</div>

Schalter für den Text in der Togglegroup

Toggler in Tabellen

Am Beispiel einer Tabelle wird hier gezeigt, dass die Toggle-Funktion auch in Wiki-Code eingebunden werden kann. Im Folgenden wird der Inhalt einer Zeile in einer Tabelle geändert, sowie eine komplette Zeile ein- und ausgelbendet. Dabei wird keinerlei HTML-Syntax verwendet.

{| border="1" cellspacing="0" cellpadding=4 align=center width=750 style="border: 1px #8B4513 solid; border-radius:5px;"

! style="background-color:#8B4513; border: 1px #8B4513 solid; border-top-left-radius:5px;" |<p style="color: #fff;">Spalte1</p>
! style="background-color:#8B4513; border: 1px #8B4513 solid;" |<p style="color: #fff;">Spalte2</p>
|-
| erste Zeile 
| erste Zeile
|-
| class="ändern" style="display:none;" | Info2
| class="ändern" style="display:none;" | Info2
| class="ändern" | Info1
| class="ändern" | Info1
|-
| dritte Zeile
| dritte Zeile
|-
| class="schieben" style="display:none;" | vierte Zeile
| class="schieben" style="display:none;" | vierte Zeile
|-
| unterste
| Zeile
|}

Blende Zeile ein
Blende Zeile aus
Ändere Zeileninhalt

Spalte1	Spalte2
erste Zeile	erste Zeile
Info2	Info2	Info1	Info1
dritte Zeile	dritte Zeile
vierte Zeile	vierte Zeile
unterste	Zeile

Spoiler in Tabellen

Natürlich ist auch in Tabellen, welche Spoilerinfos enthalten, eine gezielte Verspoilerung möglich. Dazu setzt ihr an den Anfang des Artikels {{spoilertab}} und | class="jp" style="display:none;" vor die Zeile, die verspoilert werden soll. Dadurch ist kein umständliches Verspoilern mit {{SpoilerT| Info }} mehr nötig.

{| border="1" cellspacing="0" cellpadding=4 align=center width=750 style="border: 1px #8B4513 solid; border-radius:5px;"

! style="background-color:#8B4513; border: 1px #8B4513 solid; border-top-left-radius:5px;" |<p style="color: #fff;">Spalte1</p>
! style="background-color:#8B4513; border: 1px #8B4513 solid;" |<p style="color: #fff;">Spalte2</p>
|-
| Testtabelle 
| zweite Zelle
|-
| dritte Zeile
| Zelle
|-
| unterste
| Zeile
|-
| class="jp" style="display:none;" | Spoilerinfo1
| class="jp" style="display:none;" | Spoilerinfo2
|}

!!! SPOILER WARNUNG (anzeigen) !!!

(Spoiler verbergen)

Spalte1	Spalte2
Erste Zeile	Erste Zeile
Zweite Zeile	Zweite Zeile
unterste	Zeile
Spoilerinfo1	Spoilerinfo2