Navigation

Accordion

Information in Ausklappmenüs verpacken

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:

Menü 1: 2 Thüringer Bratwürste mit Sauerkraut und Püree

Menü 2: Kalbsgulasch Jäger Art mit Waldpilzen

Menü 3: Gemüsestrudel mit Soße

Menü 1: Maultaschen mit Hackfleischfüllung

Menü 2: Putenschnitzel mit Pfefferrahmsoße und Pellkartoffeln

Menü 3: Gefüllte Erbsen mit Kartoffelraspel

Menü 1: Cordon Bleu mit Erbsen-Möhrengemüse und Pommes Princesse

Menü 2: Indisches Hühnercurry mit Reis

Menü 3: Nudelauflauf

Menü 1: Bauernfrühstück

Menü 2: Spaghetti Carbonara

Menü 3: Zuccininudeln mit geschmorten Tomaten

Menü 1: Fischstäbchen, Kartoffelpüree, Erbsen

Menü 2: Erbsen, Kartoffelpüree, Fischstäbchen

Menü 3: Kartoffelpüree, Fischstäbchen, Erbsen

Ein solches 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“. color=““ bezieht sich auf die Universitätsfarben; wenn Sie also einen kleinen Längsstrich mit der Farbe einer anderen Fakultät anbringen möchten, geben Sie dieses Attribut an und notieren zwischen die Anführungszeichen jeweils das Kürzel für die jeweilige Fakultät:

  • philfak – Philosophische Fakultät und Fachbereich Theologie
  • medfak – Medizinische Fakultät
  • natfak – Naturwissenschaftliche Fakultät
  • rwfak – Rechts- und Wirtschaftswissenschaftliche Fakultät
  • techfak – Technische Fakultät

Mit den entsprechenden Farben sähe unser Menüplan also folgendermaßen aus:

Menü 1: 2 Thüringer Bratwürste mit Sauerkraut und Püree

Menü 2: Kalbsgulasch Jäger Art mit Waldpilzen

Menü 3: Gemüsestrudel mit Soße

Menü 1: Maultaschen mit Hackfleischfüllung

Menü 2: Putenschnitzel mit Pfefferrahmsoße und Pellkartoffeln

Menü 3: Gefüllte Erbsen mit Kartoffelraspel

Menü 1: Cordon Bleu mit Erbsen-Möhrengemüse und Pommes Princesse

Menü 2: Indisches Hühnercurry mit Reis

Menü 3: Nudelauflauf

Menü 1: Bauernfrühstück

Menü 2: Spaghetti Carbonara

Menü 3: Zuccininudeln mit geschmorten Tomaten

Menü 1: Fischstäbchen, Kartoffelpüree, Erbsen

Menü 2: Erbsen, Kartoffelpüree, Fischstäbchen

Menü 3: Kartoffelpüree, Fischstäbchen, Erbsen

 

Um mehrere Abschnitte zu erzeugen (wie im Beispiel für die einzelnen Wochentage), wiederholen Sie einfach die Shortcode-Folge

[collapse title="Name" color=""]
Text
[/collapse]

Eine Sprungmarke auf ein Accordionfach setzen

Wenn Sie auf ein geöffnetes Fach auf derselben Seite verlinken möchten, müssen Sie mit dem Texteditor arbeiten, denn Sie müssen den Link kürzen. Am Einfachsten geht es, wenn Sie über den WYSIWYG-Editor zunächst den vollständigen Link eingeben und dann in den Texteditor wechseln. Dort stellt sich der Link wie folgt dar:

Screenshot von dem Link https://www.wordpress.rrze.fau.de/redaktion/accordion/#collapse_4 im Texteditor vor dem Kürzen

Der vollständige Link im Texteditor

 

Sie kürzen den Teil weg, der sich auf die „Mutterseite“ bezieht (im vorliegenden Fall „https://www.wordpress.rrze.fau.de/):

Aus https://wordpress.rrze.fau.de/redaktion/accordion/#collapse_4 wird redaktion/accordion/#collapse_4

vollständiger Link und gekürzter Link

 

Um das Ergebnis zu illustrieren, verlinken wir hier auf das Accordionfach „Freitag“ im Accordion weiter oben.

Sollten Sie auf ein geöffnetes Accordionfach auf einer anderen Seite verlinken wollen, dürfen Sie den Link nicht kürzen:

Klicken Sie hier, um eine Beispielseite mit dem oberen Beispiel-Accordion am Abschnitt „Mittwoch“ zu öffnen.


Permanente, selbst definierte Sprungmarken

Da die Accordions automatisch durchnummeriert werden (#collapse_4), kann sich ein Link ändern, wenn sich die Anzahl der Accordionfächer ändert. Um das zu vermeiden können Sie mit dem Attribut name="…" auch selbst bleibende Namen für Sprungmarken definieren:

[ collapse title="Donnerstag" color="" name="donnerstag"]

Die Verlinkung erfolgt wie oben beschrieben, d.h. der Link https://www.wordpress.rrze.fau.de/beispiel-geoeffnetes-accordion-verlinken/#donnerstag verlinkt entsprechend auf das Accordionfach mit dem Namen „donnerstag“ auf der Seite https://www.wordpress.rrze.fau.de/beispiel-geoeffnetes-accordion-verlinken.

Für den Namen können Sie Buchstaben, Zahlen, sowie Bindestrich und Unterstrich verwenden, keine Leerzeichen!


Accordions verschachteln

Wenn Sie innerhalb eines Accordions ein weiteres Accordion zeigen möchten, benötigen Sie die zusätzlichen Shortcodes accordion und accordion-item. Im Prinzip arbeiten Sie damit innerhalb eines collapse-Shortcodes genauso, wie im äußeren Accordion:

[collapsibles] <- Hier beginnt das äußere Accordion
[collapse title="Außenaccordion"] <- Hier beginnt der Inhalt des äußeren Accordions
    Hier ist der Inhalt des äußeren Accordions
    [accordion] <- Hier beginnt das innere Accordion
        [accordion-item title="Innenaccordion] <- Hier beginnt der Inhalt des inneren Accordions
         Hier ist der Inhalt des inneren Accordions
        [/accordion-item] <- Ende Abschnitt inneres Accordion
    [/accordion] <- Ende inneres Accordion
[/collapse] <- Ende Abschnitt äußeres Accordion
[/collapsibles] <- Ende Accordion

Wenn wir nun unser Menübeispiel für den Montag nehmen, sieht das dann folgendermaßen aus:

Unsere Menüs für den Montag:

2 Thüringer Bratwürste mit Sauerkraut und Püree

Kalbsgulasch Jäger Art mit Waldpilzen

Gemüsestrudel mit Soße


Einzelne Accordion-Tabs beim Laden öffnen

Es ist möglich, Accordion-Tabs zum Laden der Seite „geöffnet“ anzuzeigen.

Hierzu wird im Accordion das Attribut „load“ mit dem Wert „open“  verwendet.

Dies ist Accordion Tab 1. Es hat keine besonderen Eigenschaften.

Dies ist Accordion Tab 2. Es ist beim Laden der Seite geöffnet.

Code:

[collapsibles]
[collapse title="Tab 1"]
Dies ist Accordion Tab 1. Es hat keine besonderen Eigenschaften.
[/collapse]
[collapse title="Tab 2" load="open"]
Dies ist Accordion Tab 2. Es ist beim Laden der Seite geöffnet.
[/collapse]
[/collapsibles]

Alle Accordions öffnen

Durch das Attribut expand-all-link="true" wird rechts oberhalb des Accordions ein Button „Alle öffnen“ angezeigt, mit dem man alle Accordions gleichzeitig öffnen und wieder schließen kann.

Dies ist Accordion Tab 1.

Dies ist Accordion Tab 2.

Code:

[collapsibles expand-all-link="true"]
[collapse title="Tab 1"]
Dies ist Accordion Tab 1.
[/collapse]
[collapse title="Tab 2"]
Dies ist Accordion Tab 2.
[/collapse]
[/collapsibles]

Index/Sprungmarken zu Accordions

Bei langen Accordions können Sie am oberhalb eine Liste mit Sprungmarken einfügen. Diese wird automatisch aus den name-Attributen im Shortcode generiert (siehe Permanente, selbst definierte Sprungmarken auf dieser Seite). Beim Klick auf die Sprungmarke springt der Browser direkt zu dem Accordions mit diesem Namen und öffnet es. Fügen Sie dafür im Shortcode collapsibles einfach das Attribut register="true" ein.

Dies ist Accordion Tab 1.

Dies ist Accordion Tab 2.

Code:

[collapsibles register="true"]
[collapse title="Tab 1" name="Erstes"]
Dies ist Accordion Tab 1.
[/collapse]
[collapse title="Tab 2" name="zweites"]
Dies ist Accordion Tab 2.
[/collapse]
[/collapsibles]