Hilfe:Toggle

Hilfeseiten
Allgemein: Erste Schritte Auskunft Einstellungen Tipps und Tricks
Seitengestaltung Artikel VisualEditor Bearbeitungshilfe Neuen Artikel anlegen Links Trivia Zitate und Quellen Dateien Bilder Sprites Pokémon-Ids Videos Audio Vorlagen Übersicht Farben Formatvorlagen ParserFunctions Tabellen Toggle Variablen Variables Kategorien
Community: Diskussionsseiten Abstimmungen Signatur Benutzerseiten Benutzergruppen
Spezielles: CSS Versionen kontrollieren

Diese Seite erläutert die Grundhandhabung der Verwendung von Toggle.

Simpler Gebrauch

Dies ist die simpelste Gebrauchsform von Toggle, eine einfache Auf/Zuklappfunktion.

Dies sind die „Knöpfe“, die angeklickt werden müssen, um das Verdeckte auf-, bzw. das Sichtbare zuzuklappen.

<span class="_toggler_hide-de _toggler_show-jp">[Ausklappen]</span>

<span class="_toggler_hide-jp _toggler_show-de">[Zuklappen]</span>

Um diese nutzen zu können, wird der Inhalt mit folgenden Funktionen, „Tabs“ genannt, versehen:

Dieser Inhalt ist beim Aufrufen der Seite sichtbar.

<div class="_toggle de">''Inhalt''</div>

Dieser Inhalt ist beim Aufrufen der Seite nicht sichtbar.

<div class="_toggle jp" style="display:none;">''Inhalt''</div>

Zu beachten sind hier de und jp; diesen dienen dazu, dass Toggle erkennen kann, welcher Inhalt sichtbar gemacht und welcher verdeckt werden soll.

Vorlagenhilfe

Die Vorlage:Toggle kann dies vereinfachen:

Dieser Inhalt ist beim Aufrufen der Seite sichtbar.

{{toggle|1=''Inhalt''|2=|3=de}}

Dieser Inhalt ist beim Aufrufen der Seite nicht sichtbar.

{{toggle|1=|2=''Inhalt''|3=jp}}

Vorsicht!

Zu beachten ist hier jedoch, das Toggle wie alle class, nicht über „Dritte“ einwandfrei funktioniert.

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 (<div class="_toggle de">''Seiteninhalt''</div>) gibt es keinerlei solcher Probleme.

Fortgeschrittener Gebrauch

Diese Funktionsweise der Tabs ist dafür da, mehrere Tabs in einem Artikel zu verwenden, die sich einzeln öffnen lassen.

Klickt man auf einen „Knopf“ werden alle anderen Tabs geschlossen.

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 sind die „Knöpfe“:

<span class="_toggler_hide-tabs _toggler_show-a">Ash</span>

<span class="_toggler_hide-tabs _toggler_show-b">Bruno</span>

<span class="_toggler_hide-tabs _toggler_show-c">Cynthia</span>

Dieser Inhalt ist beim Aufrufen der Seite sichtbar.

<div class="_toggle a tabs">''Ash ist ein Glückspilz''</div>

Diese Inhalte sind beim Aufrufen der Seite nicht sichtbar.

<div class="_toggle b tabs" style="display:none;"> ''Bruno ist stark''</div>

<div class="_toggle c tabs" style="display:none;">''Cynthia ist charmant''</div>

Schlusswort

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.