Accordion

Search SG - Accordion in 53

The Accordion is used to hide long pieces of content that is revealed when the visitior clicks, allowing you to keep your pages shorter while still being informative.

Background options:
  • Light
  • Dark
  • Tell me more!

    Lorem ipsum dolor sit amet, consecte tur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Duis aute irure dolor in reprehenderit in voluptate velit. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.

  • Tell me more!

    Lorem ipsum dolor sit amet, consecte tur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Duis aute irure dolor in reprehenderit in voluptate velit. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.

Feature Checklist
  • Multiple variations
  • CTA(s) included
  • Image capabilities
  • Video capabilities
  • Smart
  • Modal friendly
  • Uses HubDB
  • Requires additional help
Use Cases

Consider using the Accordion module for a lengthy FAQs section — i.e. contest guidelines, or rules for content submission for users. It can also be used as a form of "agenda" for an event you are hosting (the Tabs module can also be good for this).

Since the content of each accordion is hidden from view by default, any information you place within this module should be secondary to the purpose of your page.

Guidelines
  • Character count
    • No strict guidelines here, since the content is hidden by default (UGJ on the title length)
  • Variations
    • Choose between small, medium, and large accordion titles
  • Things to know
    • Optional disclaimer text field allows you to add a bit of extra copy beneath the group of accordion titles
    • Recommended not to overuse this module, as the interaction can become clunky for the user