The accordion widget is a vertically stacked list of sections that can be clicked to reveal or hide content associated with them.
It allows you to add multiple columns of widgets under a customisable text header.
Here are a couple of examples:
Example 1: Listing profiles - where you have a title, image and text. You could set all profiles to be hidden where they could be expanded by clicking the +. Or, as in this example, set one profile to display in full and the others hidden.
Example 2: Customise the background colour and each sections colour
Adding and Editing the Accordion Widget
Click on +ADD CONTENT and from the widget list, click on the Accordion widget.
You will then be able to change the accordion settings. You can choose the layout (number of columns) and design (background colour) to set its overall look.
Edit the placeholder text and style it as needed.
If you have set the widget to not be expanded under the Accordion settings, click on the + to display the columns.
Once expanded, click on +ADD CONTENT
Select the widget you would like to add from the widget list. In this case to add an image.
Once you have added an image and text to the first area. Click + ADD CONTENT to add the next accordion widget. Continue this to add as many accordion widgets as you want to.
Styling the Accordion Widget
You can change the look of the accordion widget by clicking on the settings icon.
Click on the Design tab to change the Background Colour, the Divider (the colour of the line between sections), Padding (space around each widget), and even apply a Drop Shadow to the widget.
This is how the changes above would display on the widget:
If you would like to add an accordion widget with a background colour that wraps around it instead (see below), you achieve this by displaying the accordion widget within a column splitter widget.
To set this up, click on + ADD CONTENT.
Select the Column Splitter widget from the widget list.
Then select the one column wide splitter layout.
This will display as an empty column. Click on +ADD CONTENT within the column splitter widget and add the accordion widget.
Once all of the accordion widgets are added, click on the Column Splitter settings cog.
Go to the Design tab. This is where you can set the background colour, transparency, padding, etc.. In this case, the splitter background colour is being changed. Once you have selected all the changes, click on Save.
In this example, as well as setting the background colour of the column splitter, the background colour of each accordion widget has been set and a text heading added to the section.