JGU Content Layout – Accordions / Akkordeon

Im Folgenden finden Sie ein Beispiel zur Darstellung von Inhalten in Accordions.

Plugin JGU Content Layout einschalten

---

Aktivieren Sie das Plugin mit: Dashboard - JGU Tools - Plugins - Aktivieren
Dort dem Hinweistext folgen.
Ausführliche Anleitung zum Plugin aus- und einschalten

---

Live-Beispiel

So sieht das
→ JGU Content Layout – Accordions / Akkordeon aus.

Zugehöriger Quelltext

Erläuterungen

Suchfeld über dem Accordion

Über dem Accordion wird rechts ein Suchfeld eingeblendet. Dies ist notwendig, da bei der Suche über Browserfunktion (z.B. über STRG + F) nur Inhalte gefunden werden, die auch im Browser "sichtbar" sind, d.h. die im Accordion aufgeklappt sind.

Das Suchfeld durchsucht alle Accordion Bereiche und zeigt nur Bereiche, die den eingegebenen Suchbegriff enthalten bzw. blendet die anderen Element aus.

Mit dieser dynamischen Suchfunktion ist diese Darstellung optimal einsetzbar für z.B. FAQ Seiten.

Es ist auch möglich, dieses Suchfeld auszublenden, indem man im Shortcode [jgu_content_layout] den Parameter searchbar="Off" hinzufügt (siehe auch unten).

Suchmaschinen finden die Inhalte auch des zugeklappten Textes. Gerade daher ist es wichtig, die Suche anzubieten, denn wenn man auf der Seite als Treffer landet und mit STRG + F nichts findet, ist das für Ihre Besucher frustrierend. Wichtiges Schlüsselworte sollten also in den Überschriften stehen!

Eine Verschachtelung von mehreren Accordions untereinander ist nicht vorgesehen. Im Hinblick auf die zunehmende Nutzung von Smartphones und auf die Barrierefreiheit (u.a. Screenreader) ist die Verwendung von Accordions eher zu vermeiden. Nutzen Sie besser Links zu den gewünschten Unterseiten oder gliedern Sie Ihre Inhalte mit Hilfe von Überschriften.

Shortcode jgu_content_layout

Der Shortcode [jgu_content_layout] umgibt den gesamten Inhaltsbereich, der als Accordion dargestellt werden soll, d.h. am Ende muss dieser Shortcode mit [/jgu_content_layout] geschlossen werden. Dieser Shortcode benötigt den Parameter display="accordion".

Beispiel: [jgu_content_layout display="accordion"]...[/jgu_content_layout]

Weiterer Parameter (optional):

1. Parameter:searchbar
   Funktion: Suchfeld ausblenden
   Möglicher Wert: Off
   Beispiel: [jgu_content_layout display="accordion"searchbar="Off"]...[/jgu_content_layout]

Die Punkte werden ersetzt durch den folgenden Shortcode [jgu_content_layout_item].

Pro Seite darf es nur ein "jgu_content_layout" Element geben.

Shortcode jgu_content_layout_item

Der Shortcode [jgu_content_layout_item] umgibt den Inhalt eines Blocks im Accordion und muss am Ende mit [/jgu_content_layout_item] geschlossen werden. Innerhalb dieses Bereichs kann der Text auch formatiert werden (siehe Beispiel oben).

Der Shortcode kann über die folgenden Parameter angepasst werden:

1. Parameter: title
   Funktion: Titel des Blocks (Freitext)
   Beispiel: [jgu_content_layout_item title="Test"]Beispiel-Text[/jgu_content_layout_item]
2. Parameter: color
   Funktion: Farbe für die Darstellung des Blocks
   Mögliche Werte: default (grau), success (grün), info (blau), warning (orange) und danger (rot)
   (siehe http://holdirbootstrap.de/css/#helper-classes-colors)
   Beispiel: [jgu_content_layout_item color="info"]Beispiel-Text[/jgu_content_layout_item]
3. Parameter: status
   Funktion: Möglichkeit zu beeinflussen, ob dieser Block beim Laden der Seite geöffnet dargestellt werden soll
   Mögliche Werte: open, wenn dieser Parameter nicht gesetzt wurde, ist der Block beim Laden der Seite standardmäßig geschlossen
   Hinweis: Es darf für beliebig viele Bereiche der Wert open gesetzt werden.
   Beispiel: [jgu_content_layout_item status="open"]Beispiel-Text[/jgu_content_layout_item]