Help Center

Menu

Details

Use the details component to display a small panel with a title and collapsible details section.

Add the component to your page

When you are editing your page using page-builder:

  1. Add a component to your page by clicking the widgets Add component button or by adding a content block (by clicking the add_circle button) then clicking the add component button.

  2. Locate the details Squiz core component within the component browser and then click the Select button.

    details component select

  3. This will add the details component to your page.

Configure the details component

details fields

  1. A heading which is displayed for the collapsible section.

  2. Content to display when the panel is expanded.

  3. The heading level applied to the title.

  4. Controls if the panel should load in an expanded (open) or collapsed state.

Basic example

The image below shows a basic example showing three details components in a page. The first component is displayed in the open/expanded state.

details example

You can apply your own CSS styling.