Accordions
How to add and style accordions.
Last updated
Was this helpful?
How to add and style accordions.
Last updated
Was this helpful?
An Accordion displays a list of expandable items. Accordions are sometimes known as expansion panels or collapsible panels. They are components that allow you to hide or reveal content with a click or tap, providing a more organized and user-friendly experience for your users.
Accordions can be used for various purposes, such as Frequently Asked Question (FAQ) sections, product details, or any other content that benefits from a hierarchical or collapsible presentation.
Location in the Parts Library: Base Parts > Data Display > Accordion
There are also accordion parts in Page Sections, including:
Page Sections > FAQs
The accordion (parent) houses two key parts (children):
The accordion title - the visible part containing your title, which can also include other parts.
Accordion content - the content area that is revealed when the accordion is opened. This can include anything such as rows, columns, text, cards, images, or whatever you'd like to display.
There are usually several accordions. Sometimes, multiple accordions are grouped in a container called a 'Join'.
A Join is simply a container for grouping multiple items. The Join applies a border radius to the first and last item. Some accordions are in a Join so that formatting can be applied to surround all of the accordions, making them look like a group.
The join part has an editor when the join is selected. It's important to know that the join editor will format the join itself, not the parts within it, meaning that properties are applied to the border radius of the join rather than the individual accordion parts within it.
Here is an example in action. The image below shows a join housing several accordions. The join has a border applied to it, so the border surrounds the group of accordions:
The image below also shows a join, housing several accordions. Each accordion has a border applied to it, surrounding individual accordions. The join has a shadow applied to it, so the shadow surrounds the group of accordions:
The image will take up the full space of the join and will expand as each of the accordions are opened. See this in the example below:
You can also apply background images to single accordion parts.
Adjusting the opacity of the join image is the same as adjusting the opacity of a regular image. Go to the Decoration Editor in the right property menu, and go to the ‘Image Opacity’ tab.
Remember that your join will have content in the accordions, so if you want to change the opacity of the overlay content, then you’ll need to use the ‘Opacity’ tab in the Decoration Editor.
To switch the orientation of a join, say from vertical to horizontal, select the join to activate the property editor on the right.
Then, select Orientation, and choose either horizontal or vertical. The orientation of the join can be changed based on device size.
Choose your preferred accordion from the Parts Library, select the part where you’d like to add your accordion, and click ‘+ add to page’.
Accordions can be opened and closed using either a dropdown arrow or a 'plus' icon. These are found in the property editor in the right menu under 'Shape', and are applied to each accordion.
Using a vertical margin on each accordion part will create space between them, making them look like individual panels.
To do this, select the accordion. Then open the Spacing editor in the property editor panel on the right. Open the 'Margin' tab, then choose how much vertical spacing you would like to apply. Do this for each accordion.
Accordions can be given a hard edge or have the level of rounding changed using the Decoration Editor, in the 'Rounding' tab.
Rounding can be applied to all sides of the accordion, the top left, top right, bottom left, and bottom right, or a combination of these. There are various degrees of rounding ranging from none to full, with incremental size points in between.
To remove all rounding from an accordion, giving it a hard edge, choose rounding of 'none'.
In the rounding editor, when 'full' is applied to 'all' of the collapse, the accordion will have a pill shape.
Accordions are structured in a similar way to .
Like many other parts, , , , , , and can be adjusted using the property editor on the right, once the join has been selected.
To add a to your join, select the join, then go to the property editor in the right panel. Go to 'Image', then choose your preferred image from the Media Gallery or upload a new image. You can then adjust the of the background image within the Decoration Editor as needed.
Regardless of whether accordions are in a join, , , , , , , and can be applied using the property editor on the right, once the individual accordion parts have been selected.
Accordions are naturally .
Collapses
Icons
Text
Customizing and formatting
