With this module, you can create sections that expand or collapse when clicked. Try it out for FAQs, project descriptions or About sections.

It can be fully customized, from the colors to the icons to typography – no code needed. Here's how.

Please note: This feature is only available in Semplice 6.  If you're on an older version of Semplice, you can upgrade here.

How to add an accordion module

To include an accordion feature on your page, you simply have to click on 'Modules' and then drag and drop the 'Accordion' module from the list of general modules.

Editing your accordion

To add new item, delete an item, edit copy or reorder items inside the accordion you first need to go the 'Module' tab inside your pop editor and click 'Edit Accordion'. Here you can add new items by pressing the plus icon at the bottom, reorder and delete by hovering with cursor on the desired item. Accordion Editor menu also allows you to change the copy inside the accordion.

Customizing accordion

Item options

Under the section 'item options' you can change the background color of your accordion items, adjust horizontal and vertical spacings and add some rounded edges.

Changing type formatting

The Accordion module offers many customization options for your content. You can easily adjust the font, color, spacing, alignment, and more for your accordion titles under the 'Title formatting' section. Likewise, you can modify the formatting of the description by going to the 'Description formatting' section.

Adjusting separator

In the 'Separator' section, you can modify the height, color, and visibility of your separators.

Adding custom icons

If you want to use a unique icon instead of the default plus and arrow icons, you can customize it within the 'Expand/Collapse Icon' section.

 

Simply select 'Custom' from the 'Icon' dropdown menu and upload your own .PNG or .SVG files for the expanded and collapsed states of your icon (we recommend using .SVG format as it provides maximum quality).

 

You can then adjust the size of the icon using the 'Width' option and change its position by modifying the 'Top Spacing'. However, please note that the color option only applies to the default icons.

 

Pro tip:

To achieve a look similar to above with alternating colors, you can combine multiple accordion modules on top of each other.

 

More possibilities:

 

If you want to have a more advanced accordion with elements like images, then you might consider using custom code and creating an accordion that way. Future versions of Semplice will have an additional editing features.

That's it, thank you for taking the time to read this guide, and we hope you will have a lot of fun experimenting with this new feature!