Collapse
Use the collapse shortcode to reveal or hide a panel.
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.
{{< button collapse="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 >}}Important
The definition of the default
idfield fails when embedding (multiple)collapseshortcodes in an Example. Provide an explicit, uniqueidto prevent cross-interference.
The shortcode supports the following arguments:
| Name | Type | Required | Default | Comment |
|---|---|---|---|---|
| class | string | Class attribute of the inner panel element, e.g. p-3. |
||
| id | string | yes | ID of the collapse element, e.g. collapse-1. |
| Name | Type | Required | Default |
|---|---|---|---|
| class | string | ||
Class attribute of the inner panel element, e.g. p-3. |
|||
| id | string | yes | |
ID of the collapse element, e.g. collapse-1. |
|||
The Nav Shortcode uses multiple collapse panels under the hood to provide access to a group of tab panes.