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.
This is an excellent tool for those looking to create a tidy webpage with a large volume of information.
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.
Expanded vs Collapsed Accordions
At the bottom of the Accordion Layout settings is an "Expand" checkbox.
This defaults to not be expanded. Page viewers will see the title of the accordion and can open (expand) it to view what you have placed inside.
If the "Expand" option is checked on, site guests will automatically view your accordion as expanded. They will still have the option to close (collapse) it.
Note: Site administrators will always view the default behaviour for an accordion as set to "Expand". This is to make setting up & editing accordions more simple. The accordions can still be collapsed if you wish to view how a page would look to a guest.
Populating your Accordion
While expanded, click on +ADD CONTENT
Select the widget you would like to add from the widget list. In this case to add an image.
You can now add additional content to you accordion. This can be alongside your initial widget (using the other columns), or placed directly below.
After you have setup your accordion, you can click + ADD CONTENT below the accordion to add the next accordion (or other) widget. Continue this to add as many accordion widgets as you wish.
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 (spacing 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.