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.
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.
The Design section is where you change the background, border and spacing of your Accordion module. For more specific styling options, click on More local design options. There you can customize the following:
- Title: define font type and settings as well as alignment and spacing.
- Image: in this section you can define image size, alignment and spacing.
- Button: define background, text styling, spacing, etc. for your buttons on the accordion.
- Icon: set icon size and color, background color, border properties and spacing.
- List elements: style the title area that's also visible when an item is collapsed. You can set background, border and spacing.
- Expanded area: style the area that's visible when an item is expanded. You can set background, border and spacing.
For a detailed walkthrough of all styling parameters, please refer to our styling guide.
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.