Accordion Snippet

An accordion menu is a vertically stacked list of headers that can be expanded or contracted to reveal or hide content.

The accordion snippet allows the creation of an accordion through a table-based interface.

Accordions headers are added and removed by increasing or decreasing the number of table rows.

Snippet View
Published View

When to use the accordion snippet

Accordions are often used with content such as frequently asked questions (FAQs), procedures, or tasks that would otherwise take up a large amount of visual space on a page.

When clicked, each accordion header will reveal its content. Only one accordion header will be open at a time to optimize page space.

Usability guidance

Accordions are best used with large amounts of text that would be easier to digest in smaller chunks.

Accordion headers should accurately describe the content they contain.

Implementation

  1. Open a page in Modern Campus CMS and enter editing mode.
  2. Place your cursor where you would like the accordion menu to appear.
  3. From the toolbar, select the snippet icon  Snippet icon , which resembles a puzzle piece.
  4. From the list of snippets, select the Accordion snippet.
  5. Add your content by replacing the sample header and text content.
  6. To add or delete an accordion item, insert or delete a new table row.
  7. Save and preview.