Docs

Collapse

Use the collapse shortcode to reveal or hide a panel.
Overview   Styling   Arguments  

Overview  

Use the collapse shortcode to reveal or hide a panel. The panel can contain both HTML code and plain text. Link a button to the panel by assigning its ID to the collapse attribute. As an example, the following shortcode displays a button that, when clicked, triggers a panel to appear or disappear.

 
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
markdown 
{{< button collapse-id="collapse-1" >}}
    Trigger panel
{{< /button >}}

{{< collapse id="collapse-1" class="p-3 border rounded" >}}
    Some placeholder content for the collapse component. This panel is *hidden by default* but
    revealed when the user activates the relevant trigger.
{{< /collapse >}}

Styling  

Check the Bootstrap documentation  for additional styling options.

Arguments  

  Important

The definition of the default id field fails when embedding (multiple) collapse shortcodes in an Example Component. Provide an explicit, unique id to prevent cross-interference.

The shortcode supports the following arguments:

Name Type Required Default Comment
class string Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
id string Unique identifier of the current element.
Name Type Required Default
class string
Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
id string
Unique identifier of the current element.
On this page