Collapses
How to add and style collapses.
What is a Collapse?
A Collapse is used for showing and hiding content. Here's an example:
Location in the Parts Library: Base Parts > Data Display > Collapse
There are also collapse parts in Page Sections, including:
Page Sections > Services,
Page Sections > Text blocks,
Page Sections > Card rows,
Page Sections > Meet the team,
Page Sections > Testimonials, and
Page Sections > Stats.
Adding and Formatting the Collapse
Choose your preferred collapse from the Parts Library, select the part where you’d like to add your collapse, and click ‘+ add to page’.
The collapse (parent) houses two key parts (children):
The collapse title - the visible part containing your title, which can also include other parts
Collapse content - the content area that is revealed when the collapse is opened.
Editing the Collapse Part
Like many other parts, size, borders, shadow, opacity, colors, color gradients, and spacing can be applied using the property editor on the right, once the collapse has been selected.
Shape of the Icon to Open and Close the Collapse
Collpases 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'.
Rounding
Collapse parts are naturally rounded.
Collapses 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 of the collapse, 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 a collapse, giving it a hard edge, choose rounding of 'none'.
In the rounding editor, when 'full' is applied to 'all' of the collapse, the collapse will have a pill shape.
Applying a Background Image to the Collapse
Applying an image to the background of the collapse is easy - just select the collapse, then go to Image in the property editor on the right. Open up the image property editor, and select your image from the Media Gallery, or upload an image from your device.
You can then adjust the image opacity using the Decoration Editor in the property editor, by accessing the 'Image Opacity' tab.
Editing the Contents of the Collapse
To edit the title of the collapse, select it to activate the property editing panel on the right.
To edit the text, go to Text > Value set, and replace the text with your own.
If there is an icon in the title, select the icon, then go to Icon > Value set, and replace the icon with your preferred icon. Format the icon as needed.
To edit the text within the content area that is hidden, use 'Command+Click' (Mac) or 'Control+Click' (Windows) on the arrow to open the contents. That will open the content area, and you can go ahead and edit the text, or add any other content you'd like to the area. For example, you can add rows, columns, cards, images, buttons, you name it!
Related Information
Last updated
Was this helpful?