Accordion

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:

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:

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:

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/):

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:

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.

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.

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.

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]