Marsha Docs

Accordion

Accordions allow administrators to highlight important details of a section and allow the user to reveal more information if they need it. Use them sparingly — only a few per page.

Toggles Wrapper Shortcode

Use [mu_toggles] to wrap a group of [mu_toggle] shortcodes.

mu_toggles Parameters

  • Heading Level (heading): Optional. Sets the ARIA heading level for all toggle titles in this group (e.g. h3 or h4). Use this to maintain proper heading hierarchy when the accordion is inside a section that already has headings.
  • ID (id): Optional. An HTML id attribute on the accordion wrapper, useful for anchor links.
  • Extra Classes (class): Optional. Additional CSS classes on the wrapper.

Toggle Shortcode

mu_toggle Parameters

  • RequiredTitle (title): The label displayed when the accordion item is closed. Keep it short and descriptive of the content inside.
  • Open (open): Optional. Set to true to have this item expanded by default. Defaults to false.
  • CTA Link (cta_link): Optional. URL for a call-to-action button displayed at the bottom of the accordion content.
  • CTA Text (cta_text): Optional. The text for the CTA button. Defaults to Learn More.
  • Anchor (anchor): Optional. An anchor ID on this specific toggle item for deep linking directly to it.
Dos
  • Keep accordion titles short and descriptive
  • Only use a few accordions per page
  • Use the heading attr to maintain proper heading hierarchy
  • Use accordions for supplemental detail users may not always need
Don'ts
  • Put large sections of content in an accordion
  • Nest accordions within each other
  • Use accordions to hide content that should always be visible

Accordion Shortcode Examples

Default Accordion

This is our first toggle content.
This is our second toggle content.
This is our third toggle content.
Shortcode 
[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_toggle title="Third Toggle Item"]This is our third toggle content.[/mu_toggle]
[/mu_toggles]

Accordion with One Item Open by Default

This content is visible when the page loads.
This content requires a click to reveal.
Shortcode 
[mu_toggles]
[mu_toggle title="This item starts open" open="true"]This content is visible when the page loads.[/mu_toggle]
[mu_toggle title="This item starts closed"]This content requires a click to reveal.[/mu_toggle]
[/mu_toggles]

Accordion with Call-to-Action Button

Review the requirements below before submitting your application.
Apply Now
Shortcode 
[mu_toggles]
[mu_toggle title="Graduate Admissions Requirements" cta_link="https://www.marshall.edu/admissions/apply/" cta_text="Apply Now"]Review the requirements below before submitting your application.[/mu_toggle]
[/mu_toggles]