Accordion

Elements ist auf allen CMS-Instanzen vorinstalliert und bereits aktiviert. Sie können alle Elements-Shortcodes ohne vorangegangene Aktivierung benutzen.

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.

Auf dieser Seite

1. Standard-Accordions
   • Shortcode
   • Shortcode-Attributes
   • Icons und Suffix
2. Accordion-Beispiele
3. Video-Anleitungen

Standard-Accordions

Shortcode

Mit dem folgenden Shortcode können Sie ein einfaches Accordion generieren. Der Code muss folgendermaßen aufgebaut sein:

• collapsibles: Öffnet das gesamte Accordion und schließt es mit [/collapsibles], um es von umgebenden Inhalten zu trennen.
• collapse: Öffnet einen neuen Akkordeonreiter und schließt diesen mithilfe von [/collapse] wieder.
  • title="": Hier gehört der Titel des Accordionreiters hinein.
  • color="": Lassen Sie das Attribut leer, um die Standardfarbe zu verwenden. Nutzen Sie für die Fakultätsfarbe den entsprechenden Farbcode:
    • Philosophische Fakultät: phil
    • Medizinische Fakultät: med
    • Naturwissenschaftliche Fakultät: nat
    • Rechts- und Wirtschaftswissenschaftliche Fakultät: rw
    • Technische Fakultät: tf

Shortcode-Attribute

Parameter	Erklärung	Beispiel eines gefüllten Parameters
title=““	Erzeugt die Überschrift im Accordionreiter	title=“Mein Akkordeon“
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=“phil“
expand-all-link=““	Erzeugt einen Button um alle Akkordionfächer auf einmal zu öffnen	expand-all-link=“true“
hstart=““	Bestimmt die Überschriften-Hierarchie-Ebene. Standardwert: 2.	hstart=“2″
name=““	Setzt einen Namen für die Sprungmarke fest. Nähere Informationen finden Sie in der Anleitung über Sprungmarken in Akkordeons.	name=“sprungmarke“

---

Icons und Suffix hinzufügen

Alle verfügbaren Icons können unter Fontawesome v.6 nachgeschlagen werden. Das Iconset wird dabei vor dem Icon-Namen angegeben. z.B.: icon=“solid pencil“

Beispiel:

[collapsibles]
[collapse icon="solid user-secret" title="Name" color="med" suffix="Text"]
[/collapse]
[/collapsibles]

Accordion-Beispiele

Accordions mit „Open-All“ Button

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

Code

[collapsibles]

[collapse title="Farbe phil" color="phil" name="colsprungmarke1"]
[/collapse]

[collapse title="Farbe med" color="med" name="colsprungmarke2"]
[/collapse]

[collapse title="Farbe nat" color="nat" name="colsprungmarke3"]
[/collapse]

[collapse title="Farbe rw" color="rw" name="colsprungmarke4"]
[/collapse]

[collapse title="Farbe tf" color="tf" name="colsprungmarke5"]
[/collapse]

[collapse title="Farbe Fau" color="fau" name="colsprungmarke6"]
[/collapse]

[/collapsibles]

Helles Accordion

Code

[collapsibles style="light"]

[collapse title="Ein helles Accordion" color="" name="hell"]
Und hier ein wenig Text.
[/collapse]

[collapse title="Ein helles Accordion mit Farbe" color="tf" name="hell_farbe"]
Und hier ein wenig Text.
[/collapse]

[/collapsibles]

Video-Anleitungen