Docs

Collapse

Posted on August 14, 2024  (Last modified on June 20, 2025) • 2 min read • 238 words
Component  
Component  
Share via

Use the collapse shortcode to reveal or hide a panel.

Overview   Arguments   Remarks  

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 it’s 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 >}}

Arguments  

  Important

The definition of the default id field fails when embedding (multiple) collapse shortcodes in an Example. 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.

Remarks  

The Nav Shortcode uses multiple collapse panels under the hood to provide access to a group of tab panes.

On this page: