JGU Content Layout – Accordions

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

Sie benötigen für diese Beispiele das Plugin JGU Content Layout!

Live-Beispiel

Text Block #1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

Text Block #2

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Text Block #3

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Text Block #4

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Text Block #5

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

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).

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].

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), danger (orange) und warning (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]