Accordion

These steps are applicable whether you are editing an existing Basic page or creating a new one.

Adding an accordion

  1. In the Main Content region, click the paragraph selection menu and select Add Accordion.
    Select the accordion
  2. Add an Accordion Section Title; this is the text that will display which the user can click on to expand the Accordion Section Body
  3. Click the paragraph selection menu to select a paragraph for the Accordion Section Body, for example Formatted Text, and add the content to that paragraph. Note that multiple content paragraphs can be added to the Accordion Section Body.
    Accordion section body
  4. To add a second accordion section, click the Add Accordion Section button, and repeat steps two and three to add the Accordion Section Title and Accordion Section Body to the new accordion.

Additional options

  • Display expanded: Check this box to display an accordion section's body as expanded by default
  • Show Expand/Collapse All button: Check this box to provide the user with a button to expand and collapse all accordion sections simultaneously (experimental)
  • Show Indicators: Check this box to display an open (+) / close (-) indicator within the Accordion Section Title (recommended)

Editing an accordion

  1. Assuming you are in the editing user interface, locate the accordion you wish to modify.
  2. To reorder the accordion sections, click and drag the crosshair icons at the right of the Accordion Section list.
  3. To edit an accordion section, click the Edit button to the right of the section you wish to edit; to remove an accordion section, click the select arrow to the right of the Edit button and select Remove. Click Save at the bottom of the page to commit the changes to the accordion.

Removing an accordion

  1. Assuming you are in the editing user interface, locate the accordion you wish to remove.
  2. Click the Remove button to the right of the paragraph name; this will remove all accordion sections (Title and Body). Save the page to commit the removal. 

Example accordion

This is the accordion section body

...with more content