Links zu weiteren Portalen

Seiteninterne Suche

Redaktion

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=""]
[/collapse]

Sollten Sie auf einen bestimmten, geöffneten Abschnitt in einem Accordion verlinken wollen, so können Sie diesen Abschnitt mit der rechten Maustaste anklicken, im Kontextmenü „Link-Adresse kopieren“ auswählen und den Link an dem Ort einfügen, von dem Sie verlinken möchten.

Screenshot von dem Kontextmenü, in dem man die Link-Adresse kopieren kann.

Link-Adresse kopieren

 

Screenshot von dem Kontextmenü, in dem bei WordPress die Links eingegeben werden mit dem Link auf das Accordionfach.

Den Link auf der neuen Seite einfügen

 

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

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.

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:


[accordion]
[accordion-item title="Tab 1"]

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

[/accordion-item]

[accordion-item title="Tab 2" load="open"]

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

[/accordion-item]

[/accordion]