Jump to content

Accordion Component

From Swarthmore Knowledge Base

The Accordion component allows you to create collapsible/expandable sections of content on your site.

Elements

  1. Accordion Component - Title
    1. Toggle Show Title to set the visibility of the component title.
  2. Accordion Item - Title
    1. Toggle Initial State to set the accordion item to ‘open’ or ‘closed’ on page load.
    2. Set Order value to rearrange display order of individual accordion items
  3. Accordion Item - Content

Diagram of the elements of an accordion component

Examples

Step-by-step Instructions

  1. Add a Title for the accordion component. Toggle Show Title to set the visibility of the component title.
  2. Add an Accordion Item to the component:
    1. Add a Title.
    2. Toggle Initial State to set the item to display as open or closed on page load.
    3. Add text to the Content field, which will populate the main body of the accordion item.
    4. Optionally, set an Order value to rearrange the display order of the accordion item. The lower the value, the higher up it will appear in the display order.
  3. Add as many additional items as needed by clicking Add Accordion Item.