The Accordion module allows you to add blocks of content which can be expanded and collapsed as the visitor clicks on the different elements. You can add an Accordion module by selecting Accordion under the category Text and structure in the Add module overlay.
Hover the module and click on Content, Design or Settings on the dropdown to edit your Accordion module.
Content
When adding a new element to your accordion, you will see the following content options:
- Title: the title is the only text visible when the element is collapsed.
- Icon: this adds a unique item icon to the list element.
- Text: the text will only be visible when the specific list element is expanded. You can add basic formatting to the text, insert links, add Global Data tags, and more.
- Image: add an image from your File Library or your computer. You can also input an alternative text for the image for accessibility and search engine optimization purposes. If you have added both text and an image, the image will be placed before the text.
- Button label: add a button label and a button will automatically be added to your Accordion module. You can link the button to an external URL, an internal page, an email or a file for download. Finally, it's also possible to add an icon to the button.
Once you have added multiple elements to your accordion, you can change the order of them by dragging an element to another slot.
List icon: select an icon in this section if you want to use the same icon for all your list elements.
Design
The Design section is where you change the background, border, spacing and animation of your Accordion module.
Settings
In Settings, you can specify whether you, by default, want one list element to always remain expanded or allow visitors to collapse all of the list elements. Toggle Allow collapsing/expanding all items if you want your list to be completely collapsable, as illustrated below.
