JQuery Toggles

Shortcode Generator

Instead of typing out your shortcode you can also use our shortcode generator.   Learn More

Toggles

jQuery toggles are a good way to include additional information about a topic. The reader can click on the toggle and the information will slide in view. These are great for creating FAQ pages. The toggles require a title to use and you can choose to use a variation with them.

You can also create an accordian effect by surrounding your toggles with the accordian shortcode. With an accordian only one toggle will be allowed open at a time. If the user clicks on another toggle then the previous one will close before opening the new toggle.

Syntax:

[toggle title="Title"]Text[/toggle]
[toggle_framed title="Title"]Text[/toggle_framed]

[accordion_group]
[toggle title="Title"]Insert your text here[/toggle]
[toggle title="Title"]Insert your text here[/toggle]
[toggle title="Title"]Insert your text here[/toggle]
[/accordion_group]

Options:

title      // a title is necessary to use the toggle
variation  // choose a style for your toggle, for example if you wanted hotpink then 
           // you would add this, variation = "hotpink"

Example:

[toggle title="Toggle Minimized" variation = "red"]
It is a long established fact that a reader will be distracted by the readable content 
of a page when looking at its layout.
[/toggle]

[toggle title="Toggle Expanded" variation = "wheat"]
It is a long established fact that a reader will be distracted by the readable content 
of a page when looking at its layout.
[/toggle]

[toggle_framed title="Framed Toggle Minimized" variation = "green"]
It is a long established fact that a reader will be distracted by the readable content 
of a page when looking at its layout.
[/toggle_framed]

[toggle_framed title="Framed Toggle Expanded" variation = "copper"]
It is a long established fact that a reader will be distracted by the readable content 
of a page when looking at its layout.
[/toggle_framed]