Hilfe:Toggle: Unterschied zwischen den Versionen

Aus PokéWiki
Zur Navigation springen Zur Suche springen
VisuellWikitext
(Umstellung auf Clicktoggle (danke an Robbi und Shorty, fürs drüberschauen))
Zeile 1: Zeile 1:
{{Hilfenavi}}
{{Hilfenavi}}
Diese Seite erläutert die Grundhandhabung der Verwendung von '''Toggle'''.
Mithilfe von '''Toggle''', in der hier erklärten Form auch „Clicktoggle“ genannt, kann die Sichtbarkeit von Inhalten und Gruppen von Inhalten gewechselt werden.


== Simpler Gebrauch ==
== Grundlegende Funktionsweise ==
Dies ist die simpelste Gebrauchsform von Toggle, eine einfache Auf/Zuklappfunktion.  
Clicktoggle arbeitet unter anderem über die CSS-Eigenschaft <code>display</code>. Hat diese den Wert <code>none</code>, zum Beispiel so <code><span style="color: red;">style</span>=<span style="color: blue;">"display: none;"</span></code> 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.


Dies sind die „Knöpfe“, die angeklickt werden müssen, um das Verdeckte auf-, bzw. das Sichtbare zuzuklappen.
=== Toggler ===
<div style="border:1px solid #aaaaaa; padding: 8px; background-color:white;">
Die Inhalte, die als Toggler fungieren, werden mit <code><span style="color: red;">class</span>=<span style="color: blue;">"clicktoggle"</span></code> markiert. Also zum Beispiel so:
<code><nowiki><span class="_toggler_hide-de _toggler_show-jp">[Ausklappen]</span></nowiki></code>


<code><nowiki><span class="_toggler_hide-jp _toggler_show-de">[Zuklappen]</span></nowiki></code>
<code><span style="color: #a10052;"><div</span> <span style="color: red;">class</span>=<span style="color: blue;">"clicktoggle"</span> <span style="color: red;">data-type</span>=<span style="color: blue;">"set"</span> <span style="color: red;">data-for</span>=<span style="color: blue;">"group,target"</span><span style="color: #a10052;">></span>Toggler<span style="color: #a10052;"><nowiki></div></nowiki></span></code>
</div>


Um diese nutzen zu können, wird der Inhalt mit folgenden Funktionen, „Tabs“ genannt, versehen:
Die weiteren Attribute, die in diesem Beispiel bereits verwendet wurden, (<code>data-type</code> und <code>data-for</code>) geben die Art des Togglens und das anvisierte Element mit seiner Gruppe an.


Dieser Inhalt ist beim Aufrufen der Seite sichtbar.
<code>data-type</code> kann die Werte <code>set</code> und <code>toggle</code> haben. <code>set</code> macht die jeweiligen, direkt angepeilten Elemente (das heißt <code>data-group</code> und <code>data-target</code> stimmen überein) sichtbar und blendet die restlichen Elemente der Gruppe aus. <code>toggle</code> wechselt die Sichtbarkeit sämtlicher direkt anvisierter Elemente und kann ausgeblendete Elemente mit passender <code>data-group</code> sichtbar machen.
<div style="border:1px solid #aaaaaa; padding: 8px; background-color:white;">
<code><nowiki><div class="_toggle de">''Inhalt''</div></nowiki></code>
</div>


Dieser Inhalt ist beim Aufrufen der Seite <u>nicht</u> sichtbar.  
<code>data-for</code> beinhaltet die anvisierte Element-Gruppe und (mit einem Komma getrennt) das direkt angesprochene, einzelne Element. Mehr dazu im [[#Togglebare Inhalte|Abschnitt über die beeinflussten Inhalte]].
<div style="border:1px solid #aaaaaa; padding: 8px; background-color:white;">
<code><nowiki><div class="_toggle jp" style="display:none;">''Inhalt''</div></nowiki></code>
</div>


<span style="color: green;">Zu beachten sind hier <u>de</u> und <u>jp</u>; diesen dienen dazu, dass Toggle erkennen kann, welcher Inhalt sichtbar gemacht und welcher verdeckt werden soll.</span>
=== Togglebare Inhalte ===
Die Inhalte, die durch die Toggler verändert werden, werden durch <code><span style="color: red;">class</span>=<span style="color: blue;">"clicktoggle-target"</span></code> gekennzeichnet. Beispielsweise so:


== Vorlagenhilfe ==
<code><span style="color: #a10052;"><div</span> <span style="color: red;">class</span>=<span style="color: blue;">"clicktoggle-target"</span> <span style="color: red;">data-group</span>=<span style="color: blue;">"tutorial"</span> <span style="color: red;">data-target</span>=<span style="color: blue;">"example1"</span><span style="color: #a10052;">></span>Inhalt<span style="color: #a10052;"><nowiki></div></nowiki></span></code>
Die [[Vorlage:Toggle]] kann dies vereinfachen:


Dieser Inhalt ist beim Aufrufen der Seite sichtbar.
Über <code>data-group</code> wird das Element einer Gruppe zugewiesen und <code>data-target</code> ermöglicht es, ein Element direkt, einzeln anzusprechen.
<div style="border:1px solid #aaaaaa; padding: 8px; background-color:white;">
<code><nowiki>{{toggle|1=''Inhalt''|2=|3=de}}</nowiki></code>
</div>


Dieser Inhalt ist beim Aufrufen der Seite <u>nicht</u> sichtbar.  
== Beispiele ==
<div style="border:1px solid #aaaaaa; padding: 8px; background-color:white;">
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.&nbsp;B. <code>class</code> und <code>style</code>.
<code><nowiki>{{toggle|1=|2=''Inhalt''|3=jp}}</nowiki></code>
</div>


=== Vorsicht! ===
=== toggle ===
Zu beachten ist hier jedoch, das Toggle wie alle class, nicht über „Dritte“ einwandfrei funktioniert.  
Bei den ersten vier togglebaren Inhalten stimmen <code>data-group</code> und <code>data-target</code> überein, weshalb diese ein- und ausgeblendet werden können. Die Elemente der letzten beiden Zeilen haben nur eine passende <code>data-group</code>. Da das untere der beiden anfangs ausgeblendet ist, kann es durch den Toggler einmal eingeblendet werden.  


Das bedeutet, dass, wenn man zum Beispiel mit der Vorlage:Toggle einen Seiteninhalt verdeckt, und sich auf der Seite eine Tabelle befindet, sich die Tabelle selbst beim Aufklappen nicht zeigt. Mit der einfachen class (<code><nowiki><div class="_toggle de">''Seiteninhalt''</div></nowiki></code>) gibt es keinerlei solcher Probleme. 
{| class="prettytable"
|-
| class="clicktoggle c" data-type="toggle" data-for="tutToggle,bsp1" style="width: 15%;" | Toggler1
| style="width: 50%;" | <code><span style="color: red;">data-for</span>=<span style="color: blue;">"tutToggle,bsp1"</span></code>
|-
| style="height: 26px;" | <span class="clicktoggle-target c zentriert" data-group="tutToggle" data-target="bsp1">Inhalt1</span>
| style="height: 26px;" | <code><span style="color: red;">data-group</span>=<span style="color: blue;">"tutToggle"</span> <span style="color: red;">data-target</span>=<span style="color: blue;">"bsp1"</span></code>
|-
| style="height: 26px;" | <span class="clicktoggle-target c zentriert" data-group="tutToggle" data-target="bsp1" style="display: none;">Inhalt2</span>
| style="height: 26px;" | <code><span style="color: red;">data-group</span>=<span style="color: blue;">"tutToggle"</span> <span style="color: red;">data-target</span>=<span style="color: blue;">"bsp1"</span></code>
|-
| style="height: 26px;" | <span class="clicktoggle-target c zentriert" data-group="tutToggle" data-target="bsp1">Inhalt3</span>
| style="height: 26px;" | <code><span style="color: red;">data-group</span>=<span style="color: blue;">"tutToggle"</span> <span style="color: red;">data-target</span>=<span style="color: blue;">"bsp1"</span></code>
|-
| style="height: 26px;" | <span class="clicktoggle-target c zentriert" data-group="tutToggle" data-target="bsp1" style="display: none;">Inhalt4</span>
| style="height: 26px;" | <code><span style="color: red;">data-group</span>=<span style="color: blue;">"tutToggle"</span> <span style="color: red;">data-target</span>=<span style="color: blue;">"bsp1"</span></code>
|-
| style="height: 26px;" | <span class="clicktoggle-target c zentriert" data-group="tutToggle1" data-target="bsp1" style="display: none;">Inhalt5</span>
| style="height: 26px;" | <code><span style="color: red;">data-group</span>=<span style="color: blue;">"tutToggle1"</span> <span style="color: red;">data-target</span>=<span style="color: blue;">"bsp1"</span></code>
|-
| style="height: 26px;" | <span class="clicktoggle-target c zentriert" data-group="tutToggle" data-target="bsp2">Inhalt6</span>
| style="height: 26px;" | <code><span style="color: red;">data-group</span>=<span style="color: blue;">"tutToggle"</span> <span style="color: red;">data-target</span>=<span style="color: blue;">"bsp2"</span></code>
|-
| style="height: 26px;" | <span class="clicktoggle-target c zentriert" data-group="tutToggle" data-target="bsp2" style="display: none;">Inhalt7</span>
| style="height: 26px;" | <code><span style="color: red;">data-group</span>=<span style="color: blue;">"tutToggle"</span> <span style="color: red;">data-target</span>=<span style="color: blue;">"bsp2"</span></code>
|}


== Fortgeschrittener Gebrauch ==  
=== set ===
Diese Funktionsweise der Tabs ist dafür da, mehrere Tabs in einem Artikel zu verwenden, die sich einzeln öffnen lassen.
Dieses simple Beispiel besteht aus Togglern und zwei Tabellenzeilen, von denen eine anfangs ausgeblendet ist. Beide sind in der gleichen <code>data-group</code>, haben aber unterschiedliche <code>data-target</code>. Deshalb blenden die Toggler die jeweilige Zeile mit anderem <code>data-target</code> aus und blenden die mit identischem ein.


Klickt man auf einen „Knopf“ werden alle anderen Tabs geschlossen.
{| class="prettytable" style="width: 100%;"
|- class="hintergrundfarbe8"
| class="clicktoggle c" data-type="set" data-for="tutSet,bsp1" style="width: 15%;" | Toggler1 (Klick mich!)
| style="width: 35%;" | <code><span style="color: red;">data-type</span>=<span style="color: blue;">"set"</span> <span style="color: red;">data-for</span>=<span style="color: blue;">"tutSet,bsp1"</span></code>
|- class="hintergrundfarbe9"
| class="clicktoggle c" data-type="set" data-for="tutSet,bsp2" | Toggler2 (Klick mich!)
| <code><span style="color: red;">data-type</span>=<span style="color: blue;">"set"</span> <span style="color: red;">data-for</span>=<span style="color: blue;">"tutSet,bsp2"</span></code>
|-
| colspan="2" |<!--Trenner von Togglern und getoggleten Inhalten für die Übersicht-->
|- class="clicktoggle-target hintergrundfarbe8" data-group="tutSet" data-target="bsp1"
| class="c" | bsp1
| <code><span style="color: red;">data-group</span>=<span style="color: blue;">"tutSet"</span> <span style="color: red;">data-target</span>=<span style="color: blue;">"bsp1"</span></code>
|- class="clicktoggle-target hintergrundfarbe9" data-group="tutSet" data-target="bsp2" style="display: none;"
| class="c" | bsp2
| <code><span style="color: red;">data-group</span>=<span style="color: blue;">"tutSet"</span> <span style="color: red;">data-target</span>=<span style="color: blue;">"bsp2"</span>
|}


'''Beispiel:''' Der User klickt auf den „Knopf B“ (im  unterem Beispiel der „Bruno Knopf“), damit wird der Inhalt von Tab B sichtbar, und Tab A und C (Ash und Cynthia) werden verdeckt, bzw. sind nicht mehr sichtbar für den User. Klickt der User auf C wird dann Tab B verdeckt, und C wird sichtbar usw. 
Dies ist mit beliebig vielen Elementen möglich, wie man im folgendem Beispiel sehen kann. Dort sind mehrere Tabellenzellen in einer Zeile (jeweils mit <code>colspan="3"</code>), die abwechselnd ein- und ausgeblendet werden können.
{| class="prettytable c zentriert" style="width: 50%;"
|-
| class="clicktoggle hintergrundfarbe7" data-type="set" data-for="tutSet2,1" | 1
| class="clicktoggle hintergrundfarbe8" data-type="set" data-for="tutSet2,2" | 2
| class="clicktoggle hintergrundfarbe9" data-type="set" data-for="tutSet2,3" | 3
|-
| colspan="3" class="clicktoggle-target hintergrundfarbe7" data-group="tutSet2" data-target="1" | 1
| colspan="3" class="clicktoggle-target hintergrundfarbe8" data-group="tutSet2" data-target="2" style="display: none;" | 2
| colspan="3" class="clicktoggle-target hintergrundfarbe9" data-group="tutSet2" data-target="3" style="display: none;" | 3
|}


Dies sind die „Knöpfe“:
Wenn Toggler, die ein nicht existentes Element anvisieren, ausgelöst werden, werden trotzem alle anderen Elemente in der <code>data-group</code> ausgeblendet. Siehe dazu das Beispiel von oben in angepasster Form.
<div style="border:1px #aaaaaa solid; padding:8px; background-color:white; clear:both;">
{| class="prettytable" style="width: 100%;"
<code><nowiki><span class="_toggler_hide-tabs _toggler_show-a">Ash</span></nowiki></code>  
|- class="hintergrundfarbe8"
| class="clicktoggle c" data-type="set" data-for="tutSet3,bsp1" style="width: 15%;" | Toggler1 (Klick mich!)
| style="width: 35%;" | <code><span style="color: red;">data-type</span>=<span style="color: blue;">"set"</span> <span style="color: red;">data-for</span>=<span style="color: blue;">"tutSet3,bsp1"</span></code>
|- class="hintergrundfarbe9"
| class="clicktoggle c" data-type="set" data-for="tutSet3,bsp2" | Toggler2 (Klick mich!)
| <code><span style="color: red;">data-type</span>=<span style="color: blue;">"set"</span> <span style="color: red;">data-for</span>=<span style="color: blue;">"tutSet3,bsp2"</span></code>
|- class="hintergrundfarbe7"
| class="clicktoggle c" data-type="set" data-for="tutSet3,bsp3" | Toggler3 (Klick mich!)
| <code><span style="color: red;">data-type</span>=<span style="color: blue;">"set"</span> <span style="color: red;">data-for</span>=<span style="color: blue;">"tutSet3,bsp3"</span></code>
|-
| colspan="2" |<!--Trenner von Togglern und getoggleten Inhalten für die Übersicht-->
|- class="clicktoggle-target hintergrundfarbe8" data-group="tutSet3" data-target="bsp1"
| class="c" | bsp1
| <code><span style="color: red;">data-group</span>=<span style="color: blue;">"tutSet3"</span> <span style="color: red;">data-target</span>=<span style="color: blue;">"bsp1"</span></code>
|- class="clicktoggle-target hintergrundfarbe9" data-group="tutSet3" data-target="bsp2" style="display: none;"
| class="c" | bsp2
| <code><span style="color: red;">data-group</span>=<span style="color: blue;">"tutSet3"</span> <span style="color: red;">data-target</span>=<span style="color: blue;">"bsp2"</span>
|}


<code><nowiki><span class="_toggler_hide-tabs _toggler_show-b">Bruno</span></nowiki></code>  
=== 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 <code>data-group</code> 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 <code>data-group</code> nutzen sollte, da sonst ungewollte Effekte auftreten können (zum Beispiel, dass ein Toggler auch Elemente beeiflusst, die eigentlich unabhängig von ihm sein sollten).


<code><nowiki><span class="_toggler_hide-tabs _toggler_show-c">Cynthia</span></nowiki></code>  
== Weiteres ==
</div>
=== 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 <code>data-active-style</code> ermöglicht. Hier ein Beispiel:


Dieser Inhalt ist beim Aufrufen der Seite sichtbar.
<code><span style="color: #a10052;"><div</span> <span style="color: red;">class</span>=<span style="color: blue;">"clicktoggle"</span> <span style="color: red;">data-type</span>=<span style="color: blue;">"set"</span> <span style="color: red;">data-for</span>=<span style="color: blue;">"tutorialActive,example1"</span> <span style="color: red;">data-active-style</span>=<span style="color: blue;">"background-color: lightblue;"</span> <span style="color: red;">style</span>=<span style="color: blue;">"background-color: cyan;"</span><span style="color: #a10052;">></span>Toggler1 (Klick mich!)<span style="color: #a10052;"><nowiki></div></nowiki></span>
<div style="border:1px #aaaaaa solid; padding:8px; background-color:white; clear:both;">
<code><nowiki><div class="_toggle a tabs">''Ash ist ein Glückspilz''</div></nowiki></code>
</div>


Diese Inhalte sind beim Aufrufen der Seite <u>nicht</u> sichtbar.
<span style="color: #a10052;"><div</span> <span style="color: red;">class</span>=<span style="color: blue;">"clicktoggle"</span> <span style="color: red;">data-type</span>=<span style="color: blue;">"set"</span> <span style="color: red;">data-for</span>=<span style="color: blue;">"tutorialActive,example2"</span> <span style="color: red;">data-active-style</span>=<span style="color: blue;">"background-color: lightblue;"</span> <span style="color: red;">style</span>=<span style="color: blue;">"background-color: cyan;"</span><span style="color: #a10052;">></span>Toggler2 (Klick mich!)<span style="color: #a10052;"><nowiki></div></nowiki></span>
<div style="border:1px #aaaaaa solid; padding:8px; background-color:white; clear:both;">
<code><nowiki><div class="_toggle b tabs" style="display:none;"> ''Bruno ist stark''</div></nowiki></code>


<code><nowiki><div class="_toggle c tabs" style="display:none;">''Cynthia ist charmant''</div></nowiki></code>
<span style="color: #a10052;"><span</span> <span style="color: red;">class</span>=<span style="color: blue;">"clicktoggle-target"</span> <span style="color: red;">data-group</span>=<span style="color: blue;">"tutorialActive"</span> <span style="color: red;">data-target</span>=<span style="color: blue;">"example1"</span><span style="color: #a10052;">></span>test1<span style="color: #a10052;"><nowiki></span></nowiki></span>
</div>


== Schlusswort ==
<span style="color: #a10052;"><span</span> <span style="color: red;">class</span>=<span style="color: blue;">"clicktoggle-target"</span> <span style="color: red;">data-group</span>=<span style="color: blue;">"tutorialActive"</span> <span style="color: red;">data-target</span>=<span style="color: blue;">"example2"</span> <span style="color: red;">style</span>=<span style="color: blue;">"display: none;"</span><span style="color: #a10052;">></span>test2<span style="color: #a10052;"><nowiki></span></nowiki></span></code>
Dies ist im Großen und Ganzen das, was man über den Gebrauch von Toggle wissen sollte; alles andere bleibt der eigenen Kreativität überlassen.
 
wird zu:
 
<div class="clicktoggle" data-type="set" data-for="tutorialLook,example1" data-active-style="background-color: lightblue;" style="background-color: cyan;">Toggler1 (Klick mich!)</div>
 
<div class="clicktoggle" data-type="set" data-for="tutorialLook,example2" data-active-style="background-color: lightblue;" style="background-color: cyan;">Toggler2 (Klick mich!)</div>
 
<span class="clicktoggle-target" data-group="tutorialLook" data-target="example1">test1</span>
<span class="clicktoggle-target" data-group="tutorialLook" data-target="example2" style="display: none;">test2</span>
 
Der Wert von <code>data-active-style</code> überschreibt dabei die Inhalte von <code>style</code>, weshalb sich nicht ändernde Eigenschaften beiden Attributen zugewiesen werden müssen.
 
=== Automatisch aktive Toggler ===
Mithilfe von <code><span style="color: red;">class</span>=<span style="color: blue;">"[...]clicktoggle-active[...]"</span></code> 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:
 
<code><span style="color: #a10052;"><div</span> <span style="color: red;">class</span>=<span style="color: blue;">"clicktoggle '''clicktoggle-active'''"</span> <span style="color: red;">data-type</span>=<span style="color: blue;">"set"</span> <span style="color: red;">data-for</span>=<span style="color: blue;">"tutorialActive,example1"</span> <span style="color: red;">data-active-style</span>=<span style="color: blue;">"background-color: lightblue;"</span> <span style="color: red;">style</span>=<span style="color: blue;">"background-color: cyan;"</span><span style="color: #a10052;">></span>Toggler1 (Klick mich!)<span style="color: #a10052;"><nowiki></div></nowiki></span>
 
<span style="color: #a10052;"><div</span> <span style="color: red;">class</span>=<span style="color: blue;">"clicktoggle"</span> <span style="color: red;">data-type</span>=<span style="color: blue;">"set"</span> <span style="color: red;">data-for</span>=<span style="color: blue;">"tutorialActive,example2"</span> <span style="color: red;">data-active-style</span>=<span style="color: blue;">"background-color: lightblue;"</span> <span style="color: red;">style</span>=<span style="color: blue;">"background-color: cyan;"</span><span style="color: #a10052;">></span>Toggler2 (Klick mich!)<span style="color: #a10052;"><nowiki></div></nowiki></span>
 
<span style="color: #a10052;"><span</span> <span style="color: red;">class</span>=<span style="color: blue;">"clicktoggle-target"</span> <span style="color: red;">data-group</span>=<span style="color: blue;">"tutorialActive"</span> <span style="color: red;">data-target</span>=<span style="color: blue;">"example1"</span><span style="color: #a10052;">></span>test1<span style="color: #a10052;"><nowiki></span></nowiki></span>
 
<span style="color: #a10052;"><span</span> <span style="color: red;">class</span>=<span style="color: blue;">"clicktoggle-target"</span> <span style="color: red;">data-group</span>=<span style="color: blue;">"tutorialActive"</span> <span style="color: red;">data-target</span>=<span style="color: blue;">"example2"</span> <span style="color: red;">style</span>=<span style="color: blue;">"display: none;"</span><span style="color: #a10052;">></span>test2<span style="color: #a10052;"><nowiki></span></nowiki></span></code>
 
wird zu:
 
<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>

Version vom 24. Juli 2020, 19:08 Uhr

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 beeiflusst, 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

Abgerufen von „https://www.pokewiki.de/index.php?title=Hilfe:Toggle&oldid=2056151“