# Collapse

Use the collapse shortcode to reveal or hide a panel.

## 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.

```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](https://getbootstrap.com/docs/5.3/components/collapse/#css) for additional styling options.

## Arguments

> [!IMPORTANT]
> The definition of the default `id` field fails when embedding (multiple) `collapse` shortcodes in an [example component](example). Provide an explicit, unique `id` to prevent cross-interference.

The shortcode supports the following arguments:

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `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. |