Example and use of an Accordion
Switch on the Plugin JGU Content Layout!
Contents
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
[jgu_content_layout display="accordion"] [jgu_content_layout_item title="Green Accordion fold" color="success"] This Text is only visible if clicked on. [/jgu_content_layout_item] [jgu_content_layout_item title="Standard grey and opened" color="default" status="open"] This Text is visible [/jgu_content_layout_item] [jgu_content_layout_item title="Blue and open" color="info"] <em>This Text is only visible if clicked on. .</em>[/jgu_content_layout_item] [jgu_content_layout_item title="Test-Title #4" color="default"] <strong>This Text is only visible if clicked on. </strong> [/jgu_content_layout_item] [jgu_content_layout_item title="White Background" color="no-background"]Text Block #5 Use it in contexts with lots of other layout to avoid overloading the page Set it with color="no-background". [/jgu_content_layout_item] [/jgu_content_layout] |
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):
- 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:
title
Title
Beispiel:[jgu_content_layout_item title="Test"]Example-Text[/jgu_content_layout_item]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]status
Function: open some accordion folds
Possible Values: close (default) or open
You may set as many folds toopenas you like
Example:[jgu_content_layout_item status="open"]Example-Text[/jgu_content_layout_item]