Using the Accordion Snippet for Expandable/Collapsable Content

What is an Accordion?

An accordion allows for content on a page to expand and collapse when clicking on a heading:

Accordion

This is helpful for fitting a lot of content on the page without taking up too much space. It's especially useful when considering mobile devices, where screen space is limited, and can help prevent the need for our visitors to scroll excessively through pages.

How to Insert an Accordion

  1. Click on the icon for "Insert Predefined Snippet Content in the OU Campus editor.
    Accordion
  2. From the window that opens, choose the category "Content" and the snippet "Accordion." A preview will be presented, but will show the fully expanded version. Click "Insert."
    Accordion
  3. Once the snippet is inserted, you can replace the heading and content with your own information. Repeat the process to insert additional accordions.
  4. You can also created "nested" accordions, by highlighting the content of one accordion, and inserting an additional accordion in its place.
  5. Your accordion can include text, images, links, and tables.

Note that the editor will not show the content expanding/collapsing, so be sure to check the preview to make sure your accordion is working.