An accordion is a vertical list of headers, users interact to reveal or hide content within them. They reduce page length and scrolling.

Overview

Accordion wireframe
An example of an accordion with a drawer expanded

To create a new accordion, click the green ‘Add component’ button. It looks like this in the backend of the website.

Add an accordion component in contensis
Add an accordion component in Contensis.

You will then need to add a title and use a normal text editor to add body text below.

Accordion editing area
Accordion editing area.

If you want to add more accordion sections, click on the '+ Add component' button.

To edit an existing accordion, click on the pencil icon. This will take you into that area and allow you to edit text. You can also drag each accordion entry up or down to change the order, or click on the three dots on the right hand side to remove it. A built accordion looks like this.

A built accordion in the backend of Contensis.
A built accordion in the backend of Contensis.

Component in action

Once live, users click on the drop-down heading and this shows the body text. You can find an accordion in action here