Accordion

The accordion shortcode allows you to display collapsing content groups where only one panel is shown at a time. The options for this shortcode are shown below. See examples here.

Option Default Example Description
width (empty) width="200px" Set the CSS width of the accordion.
style box style="plain full" The style of the accordion:

  • box = Boxed
  • plain inline = Underlined (text width)
  • plain full = Underlined (full width)
destroy 0 destroy="1" Hide the trigger when clicked.
size (empty) size="med" There are 3 overall sizes for the accordion:

  • (empty) = Small
  • med = Medium
  • lrg = Large

Example

[accordion width="400px"]
[accordion_toggle title="Toggle 1 title"]Toggle 1 content[/accordion_toggle]
[accordion_toggle title="Toggle 2 title"]Toggle 2 content[/accordion_toggle]
[/accordion]

Nested Accordion shortcodes

Nested Accordion shortcodes will not work using the same accordion shortcode as the outer accordion, due to limitations of the WordPress shortcode parsing system. However, we have added the duplicate shortcodes accordion1, accordion2, accordion3 and accordion4, and accordion_toggle1, accordion_toggle2, accordion_toggle3 and accordion_toggle4 that you can use for the inner accordions. Only use one shortcode of each type within a nested group.

Still having trouble? Head over to the forums.

Forums