Accordion

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

Adding an accordion

  1. In the Paragraphs Body field in the Main Content region, click the + Add button and select Accordion from the Add Paragraph modal window:
    Accordion paragraph
    If multiple paragraphs already exist in the region, you can insert a new paragraph in the location of your choosing by clicking the appropriate + Add button.
  2. Add optional text to the Administrative Title field; this text will only show when editing the page, including when the paragraph is in a collapsed state.
  3. Add an Accordion Section Title; this is the text that will display which the user can click on to expand the Accordion Section Body.
  4. 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:
    Add formatted text
  5. 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.
  6. Click Save at the top of the page to preserve the accordion on the page.

Additional options

  • 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)
  • Display expanded: Check this box to display an accordion section's body as expanded by default

Editing an accordion

  1. Assuming you are in the editing user interface, locate the accordion you wish to modify.
  2. Click the Edit button to the right of the paragraph name.
  3. To reorder the accordion sections, click and drag the double-kebab icons
    Double kebab
    at the left of the Accordion Section list.
  4. 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 top of the page to commit the changes to the accordion.
  5. Save the page to commit the changes.

Removing an accordion

  1. Assuming you are in the editing user interface, locate the accordion you wish to remove.
  2. Click the kebab icon ⋮ (vertical ellipsis) to the right of the paragraph name and select Remove; this will remove all accordion sections (Title and Body):
    Location of the remove paragraph menu link.
  3. Save the page to commit the removal.

Example accordion

This is the accordion section body.

...with more content.