JGU Content Layout – Accordions

Example and use of an Accordion

Switch on the  Plugin JGU Content Layout!

Search Engines define the content of accordions as unimportant!

So use it as a structure element but place SEO-relevant information in a separate page!

Live-Example

Try our demo  → JGU Content Layout Accordion

Shortcode

Green Accordion foldPlease click button to expand or collapse content


This Text is only visible if clicked on.


Standard grey and openedPlease click button to expand or collapse content


This Text is  visible 
Blue and openPlease click button to expand or collapse content


This Text is only visible if clicked on. .
Test-Title #4Please click button to expand or collapse content


This Text is only visible if clicked on. 


White BackgroundPlease click button to expand or collapse content
Text Block #5
Use it in contexts with lots of other layout to avoid overloading the page
Set it with color="no-background".

Search the Accordion

You even search the invisible parts! This is important for your visitors. They enter your page via a search engine. Then they do not see what they searched. Even the search included in the browser fails.

This is the moment for the accordion search.

You may switch the search off, like this: [jgu_content_layout searchbar="Off"]

Shortcode jgu_content_layout

Use the Shortcode [jgu_content_layout] as a bracket around the accordion  [/jgu_content_layout] .

display="accordion".

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

Parameter (optional):

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

Shortcode jgu_content_layout_item

This is the inner bracket, the Shortcode [jgu_content_layout_item] [/jgu_content_layout_item]

Configure with these Parameters:

1. title
   Title
   Beispiel: [jgu_content_layout_item title="Test"]Example-Text[/jgu_content_layout_item]
2. color
   Color of the  Blocks
   Possible Values: grey (default), success (green), info (blue), warning (orange), danger (red) and white (no-background)
   (siehe http://holdirbootstrap.de/css/#helper-classes-colors)
   Example: [jgu_content_layout_item color="info"]Example-Text[/jgu_content_layout_item]
   Example white background: [jgu_content_layout_item color="no-background".]Example-Text[/jgu_content_layout_item]
3. status
   Function: open some accordion folds
   Possible Values: close (default) or open
   You may set as many folds to open  as you like
   Example: [jgu_content_layout_item status="open"]Example-Text[/jgu_content_layout_item]