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

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

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)