Hilfe:Toggle

Aus PokéWiki
Zur Navigation springen Zur Suche springen
Hilfeseiten
Allgemein:
Seitengestaltung
Community:
Spezielles:

Mithilfe von Toggle, in der hier erklärten Form auch „Clicktoggle“ genannt, kann die Sichtbarkeit von Inhalten und Gruppen von Inhalten gewechselt werden.

Grundlegende Funktionsweise

Clicktoggle arbeitet unter anderem über die CSS-Eigenschaft display. Hat diese den Wert none, zum Beispiel so style="display: none;" wird das jeweilige Element ausgeblendet. Durch Setzen und Entfernen dieser Eigenschaft oder Ändern des Werts kann somit die Sichtbarkeit von Elementen geändert werden. Anzumerken ist dabei, dass ausgeblendete Elemente nicht nur unsichtbar sind, sondern die anderen Elemente sich so verhalten, als wäre das unsichtbare gar nicht vorhanden.

Toggler

Die Inhalte, die als Toggler fungieren, werden mit class="clicktoggle" markiert. Also zum Beispiel so:

<div class="clicktoggle" data-type="set" data-for="group,target">Toggler</div>

Die weiteren Attribute, die in diesem Beispiel bereits verwendet wurden, (data-type und data-for) geben die Art des Togglens und das anvisierte Element mit seiner Gruppe an.

data-type kann die Werte set und toggle haben. set macht die jeweiligen, direkt angepeilten Elemente (das heißt data-group und data-target stimmen überein) sichtbar und blendet die restlichen Elemente der Gruppe aus. toggle wechselt die Sichtbarkeit sämtlicher direkt anvisierter Elemente und kann ausgeblendete Elemente mit passender data-group sichtbar machen.

data-for beinhaltet die anvisierte Element-Gruppe und (mit einem Komma getrennt) das direkt angesprochene, einzelne Element. Mehr dazu im Abschnitt über die beeinflussten Inhalte.

Togglebare Inhalte

Die Inhalte, die durch die Toggler verändert werden, werden durch class="clicktoggle-target" gekennzeichnet. Beispielsweise so:

<div class="clicktoggle-target" data-group="tutorial" data-target="example1">Inhalt</div>

Über data-group wird das Element einer Gruppe zugewiesen und data-target ermöglicht es, ein Element direkt, einzeln anzusprechen.

Beispiele

Die rechten Tabellenspalten geben die relevanten Attribute der jeweiligen Elemente an. Attribute im Allgemeinen beinhalten nähere Informationen zu einem Element. Dazu zählen z. B. class und style.

toggle

Bei den ersten vier togglebaren Inhalten stimmen data-group und data-target überein, weshalb diese ein- und ausgeblendet werden können. Die Elemente der letzten beiden Zeilen haben nur eine passende data-group. Da das untere der beiden anfangs ausgeblendet ist, kann es durch den Toggler einmal eingeblendet werden.

Toggler1 data-for="tutToggle,bsp1"
Inhalt1 data-group="tutToggle" data-target="bsp1"
data-group="tutToggle" data-target="bsp1"
Inhalt3 data-group="tutToggle" data-target="bsp1"
data-group="tutToggle" data-target="bsp1"
data-group="tutToggle1" data-target="bsp1"
Inhalt6 data-group="tutToggle" data-target="bsp2"
data-group="tutToggle" data-target="bsp2"

set

Dieses simple Beispiel besteht aus Togglern und zwei Tabellenzeilen, von denen eine anfangs ausgeblendet ist. Beide sind in der gleichen data-group, haben aber unterschiedliche data-target. Deshalb blenden die Toggler die jeweilige Zeile mit anderem data-target aus und blenden die mit identischem ein.

Toggler1 (Klick mich!) data-type="set" data-for="tutSet,bsp1"
Toggler2 (Klick mich!) data-type="set" data-for="tutSet,bsp2"
bsp1 data-group="tutSet" data-target="bsp1"

Dies ist mit beliebig vielen Elementen möglich, wie man im folgendem Beispiel sehen kann. Dort sind mehrere Tabellenzellen in einer Zeile (jeweils mit colspan="3"), die abwechselnd ein- und ausgeblendet werden können.

1 2 3
1

Wenn Toggler, die ein nicht existentes Element anvisieren, ausgelöst werden, werden trotzem alle anderen Elemente in der data-group ausgeblendet. Siehe dazu das Beispiel von oben in angepasster Form.

Toggler1 (Klick mich!) data-type="set" data-for="tutSet3,bsp1"
Toggler2 (Klick mich!) data-type="set" data-for="tutSet3,bsp2"
Toggler3 (Klick mich!) data-type="set" data-for="tutSet3,bsp3"
bsp1 data-group="tutSet3" data-target="bsp1"

Anmerkung zu den Beispielen

Abschließend ist zu sagen, dass Toggler nicht nur innerhalb einer Tabelle wirken, wie es hier eventuell in den Beispielen gewirkt hat. In ihrer data-group nehmen sie seitenweit Einfluss, weshalb man einerseits element-übergreifend (zum Beispiel über mehrere Tabellen hinweg) mit Togglern arbeiten kann, andererseits nicht zu allgemeine Namen für data-group nutzen sollte, da sonst ungewollte Effekte auftreten können (zum Beispiel, dass ein Toggler auch Elemente beeinflusst, die eigentlich unabhängig von ihm sein sollten).

Weiteres

Aussehen von aktiven Togglern

Je nachdem, ob ein Toggler ausgewählt ist (also auf ihn zuletzt geklickt beziehungsweise gedrückt wurde), kann man sein Aussehen ändern lassen. Dies wird über das Attribut data-active-style ermöglicht. Hier ein Beispiel:

<div class="clicktoggle" data-type="set" data-for="tutorialActive,example1" data-active-style="background-color: lightblue;" style="background-color: cyan;">Toggler1 (Klick mich!)</div>

<div class="clicktoggle" data-type="set" data-for="tutorialActive,example2" data-active-style="background-color: lightblue;" style="background-color: cyan;">Toggler2 (Klick mich!)</div>

<span class="clicktoggle-target" data-group="tutorialActive" data-target="example1">test1</span>

<span class="clicktoggle-target" data-group="tutorialActive" data-target="example2" style="display: none;">test2</span>

wird zu:

Toggler1 (Klick mich!)
Toggler2 (Klick mich!)

test1

Der Wert von data-active-style überschreibt dabei die Inhalte von style, weshalb sich nicht ändernde Eigenschaften beiden Attributen zugewiesen werden müssen.

Automatisch aktive Toggler

Mithilfe von class="[...]clicktoggle-active[...]" kann ein Toggler gleich beim Öffnen der Seite ausgewählt sein. Das beeinflusst nicht die Sichtbarkeit von anvisierten, togglebaren Elementen, aber das Aussehen des Togglers, sollte dieser das data-active-style-Attribut haben.

Das Beispiel von oben ein wenig angepasst:

<div class="clicktoggle clicktoggle-active" data-type="set" data-for="tutorialActive,example1" data-active-style="background-color: lightblue;" style="background-color: cyan;">Toggler1 (Klick mich!)</div>

<div class="clicktoggle" data-type="set" data-for="tutorialActive,example2" data-active-style="background-color: lightblue;" style="background-color: cyan;">Toggler2 (Klick mich!)</div>

<span class="clicktoggle-target" data-group="tutorialActive" data-target="example1">test1</span>

<span class="clicktoggle-target" data-group="tutorialActive" data-target="example2" style="display: none;">test2</span>

wird zu:

Toggler1 (Klick mich!)
Toggler2 (Klick mich!)

test1