Die WordPress-Doku für die FAU

Information in Ausklappmenüs verpacken

Elements Accordions Übersicht

Standard-Accordions

Wenn Sie viel Information auf kleinem Raum anbieten möchten, können Sie statt der üblichen Absätze mit Überschriften auch ein Accordion verwenden. So werden nur die Überschriften angezeigt, die eigentliche Information erhält man auf Klick. Als Beispiel wählen wir hier einen Speiseplan:

Shortcode

Elements-Accordion-Shortcode

Shortcode

Ein einfaches Accordion können Sie folgendermaßen erzeugen:

[collapsibles]<- Shortcode für den Beginn des Accordions
[collapse title="Name" color=""] <- Shortcode für den Balken mit der Überschrift
Inhalt des Abschnitts (im Beispiel eine Tagesmenüauswahl im Speiseplan)
[/collapse] <- Ende des Abschnitts
[/collapsibles] <- Ende des Accordions

Der Shortcode collapse hat die Attribute title=““ und color=““. Das Attribut title=““ dient dazu, die Überschrift im Accordionbalken zu erzeugen – in unserem Beispiel ist das für den Menüplan am Montag also title=“Montag“.

Mögliche Attribute

Parameter	Erklärung	Beispiel eines gefüllten Parameters
title = “ „	Erzeugt die Überschrift im Accordionbalken	title = „Meine Überschrift“
load= „“	Das Akkordionfach ist beim Laden der Seite geöffnet	load = „open“
color = “ „	Färbt den Accordionbalken in eine der folgenden Fakultätsfarben: phil med nat rw tf Wird das Attribut leer gelassen, ist es die Standard-FAU Farbe	color = „philfak“
expand-all-link=““	Erzeugt einen Button um alle Akkordionfächer auf einmal zu öffnen	expand-all-link=“true“

Beispiele

Accordions mit „Open-All“ Button

Gericht 1
Gericht 2
Gericht 3

Gericht 4
Gericht 5
Gericht 6

Gericht 7
Gericht 8
Gericht 9

Gericht 10
Gericht 11
Gericht 12

Gericht 13
Gericht 14
Gericht 15

Gericht 16
Gericht 17
Gericht 18

Genutzer Code im Beispiel:

[collapsibles expand-all-link="true"]

[collapse title="Montag" color="" name="Montag"]
Gericht 1
Gericht 2
Gericht 3
[/collapse]


[collapse title="Dienstag" color="" name="Dienstag"]
Gericht 4
Gericht 5
Gericht 6
[/collapse]


[collapse title="Mittwoch" color="" name="Mittwoch"]
Gericht 7
Gericht 8
Gericht 9
[/collapse]

[collapse title="Donnerstag" color="" name="Donnerstag"]
Gericht 10
Gericht 11
Gericht 12
[/collapse]

[collapse title="Freitag" color="" name="Freitag"]
Gericht 13
Gericht 14
Gericht 15
[/collapse]

[collapse title="Samstag" color="" name="Samstag"]
Gericht 16
Gericht 17
Gericht 18
[/collapse]

[/collapsibles]

Accordionfarben

Füllen Sie das Farb-Attribut mit color = "phil" für die dargestellte Farbe.

Füllen Sie das Farb-Attribut mit color = "med" für die dargestellte Farbe.

Füllen Sie das Farb-Attribut mit color = "nat" für die dargestellte Farbe.

Füllen Sie das Farb-Attribut mit color = "rw" für die dargestellte Farbe.

Füllen Sie das Farb-Attribut mit color = "tf" für die dargestellte Farbe.

Füllen Sie das Farb-Attribut mit color = "fau" für die dargestellte Farbe.

Code

[collapsibles]

[collapse title="Farbe phil" color="phil" name="colsprungmarke1"]
Füllen Sie das Farb-Attribut mit color = "phil" für die dargestellte Farbe.
[/collapse] 

[collapse title="Farbe med" color="med" name="colsprungmarke2"]
Füllen Sie das Farb-Attribut mit color = "med" für die dargestellte Farbe.
[/collapse]

[collapse title="Farbe nat" color="nat" name="colsprungmarke3"]
Füllen Sie das Farb-Attribut mit color = "nat" für die dargestellte Farbe.
[/collapse]

[collapse title="Farbe rw" color="rw" name="colsprungmarke4"]
Füllen Sie das Farb-Attribut mit color = "rw" für die dargestellte Farbe.
[/collapse]

[collapse title="Farbe tf" color="tf" name="colsprungmarke5"]
Füllen Sie das Farb-Attribut mit color = "tf" für die dargestellte Farbe.
[/collapse]

[collapse title="Farbe Fau" color="fau" name="colsprungmarke6"]
Füllen Sie das Farb-Attribut mit color = "fau" für die dargestellte Farbe.
[/collapse]

[/collapsibles]