FANDOM


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.

BeispieleBearbeiten

Eine Tabelle einklappbar machen Bearbeiten

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 Bearbeiten

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:

Dieser Text ist einklappbar.

Navbox Bearbeiten

Eine klassische Navbox arbeitet nach demselben Prinzip:

<div style="border:2px solid #bcc0c4; background-color:#bcc0c4;" class="mw-collapsible mw-collapsed" data-expandtext="&#9660;" data-collapsetext="&#x25B2;">
<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

Top secret

Erweiterte EinstellungenBearbeiten

AusgangszustandBearbeiten

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 festlegenBearbeiten

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 standardmäßig versteckt sein.

Dieser Text sollte auch sichtbar sein.

Benutzerdefinierter TextBearbeiten

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).

KnopfBearbeiten

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
Zeige/Verstecke Tabelle

Siehe auch Bearbeiten

Further Help & FeedbackBearbeiten

Nutzung von Community-Inhalten gemäß CC-BY-SA , sofern nicht anders angegeben.