Accordions are a useful way to hide a lot of text on a page that may not be of interest to every visitor to your page, such as the answers to a series of FAQs. They're also a useful way to reduce the amount of text on a text-heavy page.

An accordion consists of two parts: a title, and some text below it. The text below the title is revealed when a website visitor clicks the title.

How to add accordions to your page

Accordions are added one at a time. 

To add an accordion, go to your site structure view and locate the page to which you want to add an accordion. Click the blue "actions" button across from this page, and choose "direct edit" (Moderators should use standard interface).

Locate an empty content block where you want to insert your accordion, and click "insert content."

Locate the content type called, "Content: Accordion Block," and click the green "+insert" button across from it. 

Note: Be sure to select "Accordion Block," not "Accordion Group." These are different content types.

You will be taken to your accordion block editor, which has 3 fields:

  • Name: You should name your accordion block as follows: Accordion block - [insert your accordion block title here]
  • Title: Type in the title of your accordion here. Whatever you type here will become the text a site visitor clicks to open your accordion and reveal the text below it.
  • Content: This is the text someone will see after they click your accordion title. 

Click the blue "save changes" button to add this accordion to your page.

Repeat the process above to add an additional accordion to your page.

Don't forget to save, approve, and publish your changes so they appear on your website. 

Create an accordion group

If you are creating several accordions on a page (such as 10 separate FAQ accordions), you may want to group all of your accordions under a single title (such as FAQs).  This will hide all of your accordions, until someone clicks your accordion group title (as shown below).

See: How to create an accordion group.