Ausklappbare Elemente sind dazu da, um HTML-Elemente einzuklappen (oder zu verstecken).
Es kann vorkommen, dass eine Seite viele wichtige Dinge enthält und deshalb sehr lang ist. Durch die Nutzung der Einklapp-Funktion kann eine Seite deutlich gekürzt werden – ohne dabei wichtigen Inhalt zu entfernen.
Um ein Element einklappbar zu machen, muss einfach die Klasse „mw-collapsible“ hinzugefügt werden.
Beispiele[]
Eine Tabelle einklappbar machen[]
Mit dem Hinzufügen von „mw-collapsible“ als Klasse kann eine Tabelle einklappbar gemacht werden, um Platz zu sparen.
| Nummer | Buchstabe |
|---|---|
| 1 | A |
| 2 | B |
| 3 | C |
{| class="article-table mw-collapsible" style="float:right"
! Nummer !! Buchstabe
|-
| 1 || A
|-
| 2 || B
|-
| 3 || C
|}
Text einklappbar machen[]
Es ist auch möglich, einen Text einklappbar zu machen, um die Seite effektiv zu kürzen. Zum Beispiel:
<div class="mw-collapsible">
Dieser Text ist einklappbar.
</div>
Ergibt:
[]
Eine klassische Navbox arbeitet nach demselben Prinzip:
<div style="border:2px solid #bcc0c4; background-color:#bcc0c4;" class="mw-collapsible mw-collapsed" data-expandtext="▼" data-collapsetext="▲">
<span class="mw-customtoggle-toggle" style="float:right;"></span>
<span style="text-align:center; padding:2px 5px; display:block;">Navbox</span>
<div id="mw-customtoggle-toggle" class="mw-collapsible-content" style="background-color:#f2f2f2; padding:2px 5px; ">Top secret</div>
</div>
Ergibt:
Navbox
Erweiterte Einstellungen[]
Ausgangszustand[]
Um den Ausgangszustand eines Elementes als eingeklappt festzulegen, füge dem „mw-collapsible“ einfach ein „mw-collapsed“ hinzu, wie im folgenden Beispiel gezeigt:
{| class="mw-collapsible mw-collapsed article-table"
! Die Überschrift !! Bleibt sichtbar
|-
| Der Inhalt || ist versteckt
|-
| bis „ausklappen“ || geklickt wird
|}
Ergibt:
| Die Überschrift | Bleibt sichtbar |
|---|---|
| Der Inhalt | ist versteckt |
| bis „Ausklappen“ | geklickt wird |
Den einklappbaren Inhalt festlegen[]
Du kannst auch festlegen, welcher Teil des Elements der einklappbare Inhalt sein soll, indem du „mw-collapsible-content“ verwendest.
<div class="mw-collapsible mw-collapsed" style="width:100%">
Dieser Text ist nicht einklappbar, aber der Nächste ist einklappbar und standardmäßig versteckt:
<div class="mw-collapsible-content">Dieser Text sollte standardmäßig versteckt sein.</div>
Dieser Text sollte auch sichtbar sein.
</div>
Ergibt:
Dieser Text ist nicht einklappbar, aber der Nächste ist einklappbar und standardmäßig versteckt:
Dieser Text sollte auch sichtbar sein.
Benutzerdefinierter Text[]
Falls du den Standard-Text („Ausklappen“/„Einklappen“) nicht magst, kannst du diese mit der Benutzung von „data-expandtext“ und „data-collapsetext“ ändern.
{| class="article-table mw-collapsible" data-expandtext="Illuminate" data-collapsetext="Deluminate"
! Meine || Überschrift
|-
| A || B
|-
| C || D
|}
| Meine | Überschrift |
|---|---|
| A | B |
| C | D |
Anmerkung: Um dies im ganzen Wiki zu ändern, kann MediaWiki:Collapsible-expand und MediaWiki:Collapsible-collapse editiert werden (aktuell, März 2017, sind diese Seiten aber nicht auf der Whitelist).
Knopf[]
Wie man in der Tabelle hier drüber sieht, vergrößert der Knopf in der zweiten Spalte die Breite der Tabelle stark. Dies kann dadurch behoben werden, dass der Knopf woanders platziert wird.
Um das zu tun müssen wir dem Element eine ID zuweisen. Der ID muss „mw-customcollapsible-“ vorangehen und kann eine beliebige Phrase sein (bedenke, dass diese nur für ein Element genutzt werden kann). Bei unserem Beispiel oben könnte man die ID „mw-customcollapsible-meineTabelle“ hinzufügen.
Dies entfernt schonmal den Knopf aus der Tabelle selber. Jetzt müssen wir ein Element mit der Klasse „mw-customtoggle-meineTabelle“ auf der Seite hinzufügen (bedenke, dass dies eine Klasse statt wie zuvor eine ID ist).
{| class="article-table mw-collapsible" id="mw-customcollapsible-meineTabelle"
! Meine || Überschrift
|-
| A || B
|-
| C || D
|}
<div class="mw-customtoggle-meineTabelle wikia-menu-button">Zeige/Verstecke Tabelle</div>
| Meine | Überschrift |
|---|---|
| A | B |
| C | D |
Siehe auch[]
- Collapsible elements auf MediaWiki.org (englisch)
Mehr Hilfe[]
- Ein Stichwortverzeichnis zu verschiedensten Hilfeseiten findest du auf Hilfe:Index.
- Einen geordneten Einstieg zur Hilfe gibt es auf der Seite Hilfe:Übersicht.
- Fragen an andere Benutzer kannst du in den Diskussionen des Community-Wikis stellen.
- Anmerkungen zu dieser Hilfeseite kannst du auf der dazugehörigen Diskussionsseite hinterlassen.
- Um Fehler zu melden, kontaktiere bitte einen Ansprechpartner oder nutze das entsprechende Kontaktformular.