{"id":177,"date":"2019-08-24T08:07:21","date_gmt":"2019-08-24T12:07:21","guid":{"rendered":"http:\/\/www.marshall.edu\/website\/?page_id=177"},"modified":"2026-03-02T13:58:13","modified_gmt":"2026-03-02T18:58:13","slug":"accordion","status":"publish","type":"page","link":"https:\/\/www.marshall.edu\/marsha\/accordion\/","title":{"rendered":"Accordion"},"content":{"rendered":"

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 \u2014 only a few per page.<\/p>\n

Toggles Wrapper Shortcode<\/h2>\n

Use [mu_toggles]<\/code> to wrap a group of [mu_toggle]<\/code> shortcodes.<\/p>\n

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

    Toggle Shortcode<\/h2>\n

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

          Accordion Shortcode Examples<\/h2>\n

          Default Accordion<\/h3>\n\n
          \n\n\t\t\t
          \n\t\t\t \n \n \n \n
          \n First Toggle Item\n <\/div>\n\n \n \n <\/path>\n <\/svg>\n <\/span>\n <\/button>\n\n \n
          \n This is our first toggle content.\n\n <\/div>\n <\/div>\n <\/div>\n \n \n \n
          \n Second Toggle Item\n <\/div>\n\n \n \n <\/path>\n <\/svg>\n <\/span>\n <\/button>\n\n \n
          \n This is our second toggle content.\n\n <\/div>\n <\/div>\n <\/div>\n \n \n \n
          \n Third Toggle Item\n <\/div>\n\n \n \n <\/path>\n <\/svg>\n <\/span>\n <\/button>\n\n \n
          \n This is our third toggle content.\n\n <\/div>\n <\/div>\n <\/div>\n\n\t\t<\/div>\n\t\n\t
          \n\t\t
          \n\t\t\tShortcode<\/span>\n\t\t\t copied = false, 2000)\"\n\t\t\t\tclass=\"flex items-center gap-1.5 px-3 py-1.5 rounded text-[11px] font-medium cursor-pointer transition-all duration-150\"\n\t\t\t\t:class=\"copied\n\t\t\t\t\t? 'bg-green\/20 text-green border border-green\/30'\n\t\t\t\t\t: 'bg-white\/8 text-white\/60 border border-white\/10 hover:bg-white\/14 hover:text-white\/90'\"\n\t\t\t\tstyle=\"font-family: 'JetBrains Mono', ui-monospace, monospace;\"\n\t\t\t>\n\t\t\t\t