One thing that may be confusing about this section is distinguishing the difference between “Toggles” and an “Accordion” — A toggle allows you to hide a piece of content and let the user open and close it. You can stack many of these toggles in a row for a nice way of organizing content in your page or post. Then, in addition to that you can wrap your set of toggles with the “accordion” shortcode to group them together. This means that your set of toggles will now take on the traditional accordion concept of only allowing one toggle open at any given time.
[toggle title="Toggle Title #1"]content goes here...[/toggle] [toggle title="Toggle Title #2" icon="star"]content goes here...[/toggle] [toggle title="Toggle Title #3" last]content goes here...[/toggle]
Inner Toggles: To allow a toggle within a toggle to work, the inner toggle will need the suffix, "_inner" added to its shortcode. This will not work if the toggles are inside an accordion shortcode.
[toggle title="Toggle Title #1"] [toggle_inner title="Inner Toggle"]content goes here...[/toggle_inner] [/toggle]
Options
| Argument | Default | Description |
|---|---|---|
| title (required) | Title of the toggle. | |
| open | false | true or false - Set this toggle to an open state on page load. |
| icon | Icon used on the trigger (view icons) Using an icon besides the default will not cause it to rotate when a toggle is open. Only the default "plus" icon rotates when active. Ex: arrow-right, chevron-right, twitter, etc. Note: Do not prefix icon ID with fa-. |
Accordion
So now that you’ve got a set of toggles, what if you want to group them together as a traditional accordion? You can do this simply wrapping your toggles in the [accordion] ... [/accordion] shortcode.
[accordion] [toggle title="Toggle Title #1"]content goes here...[/toggle] [toggle title="Toggle Title #2"]content goes here...[/toggle] [toggle title="Toggle Title #3"]content goes here...[/toggle] [/accordion]