How to add an accordion to your page | Civio Engage Knowledge Base       [ ![Civio Knowledge Base](/civio-light.svg) ](https://nginx.deploy-lagoon-production.civio-engage-docs.dh1.amazee.io)  [Articles](/articles) [Releases](/releases)

   [Home](/)   [Knowledge base](/articles)   [📄 Working with content](/articles?category=1)

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

Updated 2 months ago

    Search  Go

   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.**

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.**

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.**

 [    Back to articles ](/articles)

  Table of contents
-----------------

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