6.15. Creating an accordion


What is an accordion paragraph?

An accordion expander essentially allows you to condense content into a group of expandable headings, making it easier for your users to see the high-level picture while also allowing them to get straight to the information that they want. This might be good for something like a product description where for example you might want to hide a lengthy paragraph or list of features.


1. How to add an accordion to your page

To add an accordion expander, you first want to go to content and select edit on your desired page. Select the add paragraph button at the bottom left of the page. Then select the accordion paragraph type.

You will now see the accordion paragraph appear alongside your existing paragraphs.

Give your accordion a heading, this will be displayed above the accordion. Then, you want to add an accordion item for each expandable heading. Decide what each heading is going to be, add the expandable text content that will be hidden until the heading is selected, and add a category.


2. Changing the location of the accordion on the page

To change the location of the accordion on the page you can simply drag the paragraph type up or down.


3. Reordering accordion items

You can also change the order of the accordion items by dragging each item up and down within the accordion paragraph editor.


4. Preview and save

To view your changes before saving you can use the preview button at the top right, and always remember to save your changes before you finish.