Collapse

The Collapse component displays content in a collapsible card format, ideal for FAQs and sections where content can be expanded or hidden.

What is the Collapse component?

The Collapse component displays content in a collapsible card format, similar to a Card but with the ability to expand or hide content. It's ideal for FAQs and sections where users may want to show or hide details.

Open the CMS editor where you want to add or edit a Collapse component.

Drag the Collapse component onto your page.

Add a header and the content you want to show or hide inside the Collapse.

Set whether the Collapse is open or closed by default, and adjust any other options as needed.

Save your changes in the editor.

Collapse Component Settings

All Collapse components support the standard CMS settings below. Use these tabs to control layout, typography, and display for your Collapse:

General

cms general

Selectors

In this box you can add classes that are defined elsewhere on the site to a specific page.

ID

ID is used to direct user to an element of the page or identify it for future use, so you can link to this aspect of the page.

Styles

Styles are used to add a specific style not predefined in a class. You can add style settings which can be applied against any component. Below are a list of styles you can add:

Margin (either just "margin:" or specific sides of a component like "margin-top:" or "margin-left:")
Padding (either just "padding:" or specific sides of a component like "padding-top:" or "padding-left:")
Max Width
Font
Border
ID

Examples:

max-width: 352px!important;
margin-bottom: 0 auto;
padding-top: 30px;

To center an image: margin:auto;
To center text/markdown: text-align: center;
To make a component go edge-to-edge: margin-left:-15px;margin-right:-15px