How to add an accordion to your page | Civio Engage Knowledge Base     [Skip to content](#main)  [ ![Civio Engage Knowledge Base](/civio-light.svg) ](https://nginx.deploy-lagoon-production.civio-engage-docs.dh1.amazee.io)  [Product documentation](/articles) [Release notes](/releases) [Roadmap](/roadmap) [ Support portal ](https://nginx.deploy-lagoon-production.civio-engage-docs.dh1.amazee.io/portal/login)   Toggle navigation      

  [Product documentation](/articles) [Release notes](/releases) [Roadmap](/roadmap) [Support portal](https://nginx.deploy-lagoon-production.civio-engage-docs.dh1.amazee.io/portal/login)  

  1. [Home](/) ›
2. [Product documentation](/articles) ›
3. [Working with content](/articles?category=1) ›
4. How to add an accordion to your page

 How to add an accordion to your page
====================================

Updated 20 hours ago · 3 min read

 Search     Search  

Adding an accordion to your page
--------------------------------

To add an accordion tool to your project page:

1. Log in to your Civio Engage website.
2. Select the **Projects** tab on the left-hand menu bar. This will display all the projects you have access to.
3. Scroll or search for the relevant project, and click the **Title** to open the project overview window.
4. Select the **Edit** tab.
5. In the Rich content interface in the Body section click the **plus** icon.
6. In the pop-up window, click the **Accordion** icon.
7. Enter how many items you would like to add to the accordion, and click **Add Accordion.**
8. Your accordion will appear in the Rich content interface. Edit the titles and the content by double-clicking on the placeholder text and entering your own text.
9. To save your changes, click **Publish.**

![Inserting an accordion into the Rich content editor: opening the block picker, selecting Accordion, and the new accordion appearing with placeholder items.](https://engage.knowledge.civ.io/storage/i2plbecyRM2BBr6dzcILZw7hq3vkVmafDwc7tMNE.gif)

#### Setting how accordions appear when published

The open or closed state of each accordion item is saved with your content. Set each item the way you want it to appear on the page, then click **Publish**, that state is kept when the page is published.

While you are editing, accordion items always appear open so the content is easier to work with. This does not change how they appear once published.

Adding accordion items
----------------------

To add an accordion item:

1. Log in to your Civio Engage website.
2. Select the **Projects** tab on the left-hand menu bar.
3. Scroll or search for the relevant project, and click the **Title** to open the project overview window.
4. Select the **Edit** tab.
5. In the Rich content interface in the Body section, scroll to the accordion.
6. To add an item to your accordion, hover over the existing accordion and click the **+ Add item** button.
7. To update the title and body text of the new accordion item, double-click on the placeholder text and enter your text.
8. To save your changes, click **Publish.**

Moving accordion items
----------------------

To drag and drop an accordion item:

1. Log in to your Civio Engage website.
2. Select the **Projects** tab on the left-hand menu bar.
3. Scroll or search for the relevant project, and click the **Title** to open the project overview window.
4. Select the **Edit** tab.
5. In the Rich content interface in the Body section, scroll to the accordion.
6. To drag and drop an exisitng accordion item, click on the **drag and drop icon** in front of the item title, and drag and drop the item to the preferred place.
7. To save your changes, click **Publish.**

![Dragging an accordion item to a new position within the accordion, using its drag-and-drop icon.](https://engage.knowledge.civ.io/storage/UDQe7hjoktPlep2hhaYSzLVkTVeNFVeAxjqdlSUA.gif)

Deleting accordion items
------------------------

To delete an accordion item:

1. Log into your Civio Engage website.
2. Select the **Projects** tab on the left-hand menu bar.
3. Scroll or search for the relevant project, and click the **Title** to open the project overview window.
4. Select the **Edit** tab.
5. In the Rich content interface under the Body title, scroll to the accordion.
6. To delete an item/row of your existing accordion, select the unwanted item/row and use the backspace/delete key.
7. To save your changes, click **Publish.**

![An accordion item selected in the Rich content editor, ready to be removed with the backspace/delete key.](https://engage.knowledge.civ.io/storage/DcmkIcPwSZWyne7epHA9YUiGGyxrQVcHbwFxBy5Z.png)

Was this article helpful?
-------------------------

Your feedback helps us prioritise what to rewrite.

      Yes     No  

 [    Back to Working with content ](/articles?category=1) 

 On this page 

### Still need help?

Raise a request in the support portal and track it to resolution.

 [ Submit a support request ](https://nginx.deploy-lagoon-production.civio-engage-docs.dh1.amazee.io/portal/login)

Submit a support request through the [support portal](/portal) or email .

 © 2026 [Civio](https://civ.io) [Privacy Policy](/articles/privacy-policy) [Terms of Use](/articles/terms-of-use)