The collapsible component consists of two parts: the anchor and the content. If the anchor slot is not filled, the anchor will default to a basic button with text. The content must be provided and is the element that can be hidden or shown when the anchor is clicked.
<div> <dt-collapsible class="d-fc-primary" anchorText="Label 1" maxWidth="340px" initial-focus-element="first" > <template #content> <div class="d-ta-center d-ba d-bc-warning d-bgc-warning d-bas-dotted d-baw2 d-p-100 d-code--sm">(content slot)</div> </template> </dt-collapsible> <dt-collapsible anchorText="Label 2" maxWidth="340px" initial-focus-element="first" > <template #content> <div class="d-ta-center d-ba d-bc-warning d-bgc-warning d-bas-dotted d-baw2 d-p-100 d-code--sm">(content slot)</div> </template> </dt-collapsible> </div>
<dt-collapsible :open="isOpen"> <template #anchor> <dt-button @click="toggleIsOpen"> Click Me! </dt-button> </template> <template #content> <div> This will be shown in the expanded area. </div> </template> </dt-collapsible>
import { DtCollapsible } from '@dialpad/dialtone-vue';
Name
|
Type
|
|---|---|
anchor | Slot for the anchor element that toggles the collapsible content |
content | Slot for the collapsible element that is expanded by the anchor |
Name
|
Default
|
Type
|
|---|---|---|
anchorClass | null | string|array|object Additional class name for the anchor wrapper element. |
anchorText | null | string Text that is displayed on the anchor if nothing is passed in the slot.
Ignored if the anchor slot is used. |
ariaLabel | null | string Label on the collapsible content. Should provide this or ariaLabelledBy but not both. |
ariaLabelledBy | null | string Id of the element that labels the collapsible content. Defaults to the anchor element.
Should provide this or ariaLabel but not both. |
contentClass | null | string|array|object Additional class name for the content wrapper element. |
contentElementType | 'div' | string HTML element type (tag name) of the content wrapper element. |
elementType | 'div' | string HTML element type (tag name) of the root element of the component. |
id | generated unique ID | string The id of the content wrapper. |
maxHeight | null | string The maximum height of the collapsible element.
Possible units rem|px|%|em |
maxWidth | null | string The maximum width of the anchor and collapsible element.
Possible units rem|px|%|em |
open | null |
"null"
|
"true"
|
"false"
Controls whether the collapsible is shown. When null (default), the collapsible
starts expanded and toggles on click. When set to true or false, the default
trigger is disabled and the parent controls visibility via v-model:open. |
Name
|
Type
|
|---|---|
opened | Boolean Event fired when the content is shown or hidden |
update:open | undefined Event fired to sync the open prop with the parent component |
Collapsible documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope