Skip to main content

Accordions

Accordions is a page component consisting of collapsible sections of content. Clicking on an accordion heading will show/hide (toggle) the content associated with the heading.

One accordion consists of a title and its content. Multiple accordions make up an accordion group. Multiple accordion groups can also be added to a page, separated by an optional heading. 



How To

Create accordions

  1. Create a new page or edit an existing page.
  2. If you're using the Standard page template: in the Content type section of the page editor, select the Accordion content (toggled sections) option.

    Standard page template
    Accordion content option

    If you're using the Global page template: in the current Section, select the Accordions option from the Component dropdown.

    Global page template
    Accordions component

    The accordion editor will appear.

  3. Accordion group settings:
    1. Optionally enter a heading in the Accordion group title field.
    2. If you want the first accordion in the group to be open (expanded) when the page is first loaded, set the Open first accordion by default option to Yes.
      Accordion group settings
  4. Expand the Accordion section. Enter the first accordion title in the Accordion title field and the content for that accordion in the Accordion content WYSIWYG editor
    Accordion content editor
  5. To create additional accordions, click the green + icon in the Accordion section label. A new accordion section will appear after the current accordion section. Continue adding accordions as required.
    Add additional accordions
  6. You can reorder accordions by clicking on the arrows on each Accordion section label. Delete an accordion by clicking on the red x icon on each Accordion section label.
    Re-order, add, or delete accordions
  7. If you want multiple accordion groups on a page, click the green + icon in the Accordion content (toggled sections) or Accordions section label. This will create another accordions group section. Add/delete/re-order accordion group sections as required.
    Add accordion groups

 

  Tip: expand and collapse individual accordion/accordion group sections as you are working in the page editor to minimize the visual clutter on the screen.

Search the CMS User Guide