Accordion

Accordions, if used properly, can be incredibly helpful design pattern for users. Accordions allow administrators to highlight important details of a section and allow the user to reveal more information if they feel they need it.

Accordion Shortcode Parameters

The parameters for the accordion shortcode:

  • RequiredTitle (title): This is just the title that will be displayed while the accordion items is closed.
Dos
  • Keep accordion titles short
  • The content of the accordion should only include text and links
  • Only use a few accordions per page to help users who use screen or keyboard navigation
  • Ensure the title is descriptive of what is included in the content
Don'ts
  • Put large sections of content in an accordion
  • Nest accordions within each other

Accordion Shortcode Examples

Default Accordion

This is our first toggle content.
This is our second toggle content.
[mu_toggles]
[mu_toggle title="First Toggle Item"]This is our first toggle content.[/mu_toggle]
[mu_toggle title="Second Toggle Item"]This is our second toggle content.[/mu_toggle]
[/mu_toggles]
Copy Code to Clipboard