Adding Accordions

Adding Accordions
Content Sections

An accordion is a list of titles that visitors click to show or hide the content under each one. It works well for frequently asked questions, or for long pages where visitors only need one part. Accordions are added as a Content Section.

Add an Accordion

At the bottom of the Content Sections area, select the arrow beside the Add button, then choose Add Accordion.

The Content Sections add menu open, with Add Accordion highlighted.

The accordion appears with its first section. Each section has:

  • Accordion Section Title – the text visitors click, such as a question.
  • Accordion Section Body – the content that opens under the title.
  • Display expanded – turn it on to show this section open when the page loads.

A new accordion with its first section, with the Accordion Section Title field and the Add Simple button highlighted.

Add the Section Content

Type the section title. Then, under Accordion Section Body, select Add Simple to add a text editor. To add something else, select the arrow beside it: an image, columns, a view or a Google map.

The Accordion Section Body add menu, with Image, Columns, View and Google Map options.

Type the content in the text editor. It has the same buttons as the main text editor, so you can add links, lists, tables and images.

An accordion section with a title and its answer typed in the text editor.

A section body can hold more than one item, for example text followed by an image. Add them in order with the same buttons.

Add More Sections

Select Add Accordion Section below the last section, then fill in its title and body the same way. Add as many sections as you need.

The Add Accordion Section button highlighted below a section.

Open a Section When the Page Loads

All sections start closed. To show one open, turn on Display expanded in that section. Usually only the first section, if any, should start open.

The Display expanded switch turned on for an accordion section.

Reorder, Copy or Remove a Section

  • Reorder: drag a section by the dotted handle on its left.
  • Copy: select the three dots at the top right of the section, then Duplicate.
  • Remove: select the three dots, then Remove. If asked, select Confirm removal.

The three-dot menu of an accordion section open, showing Remove and Duplicate.

To remove the whole accordion, use the Remove button at the top right of the Accordion.

On Your Page

Save the page and view it. Each section title shows as a bar that visitors click to open or close the section. Opening one section closes the others. Your site may also show Expand All and Collapse All buttons above the accordion, which open or close every section at once. Colors and styles depend on your site.

An accordion on a page, with the first section open and two closed sections below it.

Other Options

Depending on your site, the accordion may also have these settings at the top:

  • Show Indicators – shows open and close signs (such as + and −) beside each title.
  • Header – a heading shown above the accordion.

Tips

  • Keep section titles short and clear, such as a question. Screen readers read them as headings, so visitors can jump between them.
  • Section titles are Heading 2 (or Heading 3 if the accordion has a Header). Headings inside a section should be one level lower, for example Heading 3. See Headings and Text Formatting.
  • Don’t hide information every visitor needs, such as deadlines or contact details, inside a closed section.
  • Save the page as Published when you are done so the public can see it.
Dennis Osnitsky