Data display
Collapsible
One native disclosure that shows and hides a panel of content, without JavaScript.
| Class name | Type | Description |
|---|---|---|
collapseplf:collapse | Component | A native details disclosure |
collapse-triggerplf:collapse-trigger | Part | The bordered summary |
collapse-titleplf:collapse-title | Part | The trigger's label |
collapse-iconplf:collapse-icon | Part | An SVG icon before the title; an icon class there doesn't need it |
collapse-contentplf:collapse-content | Part | The panel shown when open |
collapse-arrowplf:collapse-arrow | Modifier | Ends the trigger with a chevron that turns over while open |
Default
Keep links and form controls out of the summary and add no roles, aria-expanded or aria-controls, which the browser already provides; for a group of disclosures, use Accordion.
More details
Content shown when the panel opens.
<details class="collapse collapse-arrow">
<summary class="collapse-trigger">
<span class="collapse-title">More details</span>
</summary>
<div class="collapse-content">Content shown when the panel opens.</div>
</details><details class="plf:collapse plf:collapse-arrow">
<summary class="plf:collapse-trigger">
<span class="plf:collapse-title">More details</span>
</summary>
<div class="plf:collapse-content">Content shown when the panel opens.</div>
</details>import { Collapsible, CollapsibleContent, CollapsibleTitle, CollapsibleTrigger } from '@pelatform/react';
export function Example() {
return (
<Collapsible arrow>
<CollapsibleTrigger>
<CollapsibleTitle>More details</CollapsibleTitle>
</CollapsibleTrigger>
<CollapsibleContent>Content shown when the panel opens.</CollapsibleContent>
</Collapsible>
);
}import { Collapsible, CollapsibleContent, CollapsibleTitle, CollapsibleTrigger } from '@pelatform/react/prefixed';
export function Example() {
return (
<Collapsible arrow>
<CollapsibleTrigger>
<CollapsibleTitle>More details</CollapsibleTitle>
</CollapsibleTrigger>
<CollapsibleContent>Content shown when the panel opens.</CollapsibleContent>
</Collapsible>
);
}More details
Content shown when the panel opens.
<details class="collapse collapse-arrow" open>
<summary class="collapse-trigger">
<span class="collapse-title">More details</span>
</summary>
<div class="collapse-content">Content shown when the panel opens.</div>
</details><details class="plf:collapse plf:collapse-arrow" open>
<summary class="plf:collapse-trigger">
<span class="plf:collapse-title">More details</span>
</summary>
<div class="plf:collapse-content">Content shown when the panel opens.</div>
</details>import { Collapsible, CollapsibleContent, CollapsibleTitle, CollapsibleTrigger } from '@pelatform/react';
export function Example() {
return (
<Collapsible arrow open>
<CollapsibleTrigger>
<CollapsibleTitle>More details</CollapsibleTitle>
</CollapsibleTrigger>
<CollapsibleContent>Content shown when the panel opens.</CollapsibleContent>
</Collapsible>
);
}import { Collapsible, CollapsibleContent, CollapsibleTitle, CollapsibleTrigger } from '@pelatform/react/prefixed';
export function Example() {
return (
<Collapsible arrow open>
<CollapsibleTrigger>
<CollapsibleTitle>More details</CollapsibleTitle>
</CollapsibleTrigger>
<CollapsibleContent>Content shown when the panel opens.</CollapsibleContent>
</Collapsible>
);
}More details
Content shown when the panel opens.
<details class="collapse collapse-arrow">
<summary class="collapse-trigger">
<span class="icon icon-info-circle"></span>
<span class="collapse-title">More details</span>
</summary>
<div class="collapse-content">Content shown when the panel opens.</div>
</details><details class="plf:collapse plf:collapse-arrow">
<summary class="plf:collapse-trigger">
<span class="plf:icon plf:icon-info-circle"></span>
<span class="plf:collapse-title">More details</span>
</summary>
<div class="plf:collapse-content">Content shown when the panel opens.</div>
</details>import { Collapsible, CollapsibleContent, CollapsibleTitle, CollapsibleTrigger, Icon } from '@pelatform/react';
export function Example() {
return (
<Collapsible arrow>
<CollapsibleTrigger>
<Icon name="info-circle" />
<CollapsibleTitle>More details</CollapsibleTitle>
</CollapsibleTrigger>
<CollapsibleContent>Content shown when the panel opens.</CollapsibleContent>
</Collapsible>
);
}import { Collapsible, CollapsibleContent, CollapsibleTitle, CollapsibleTrigger, Icon } from '@pelatform/react/prefixed';
export function Example() {
return (
<Collapsible arrow>
<CollapsibleTrigger>
<Icon name="info-circle" />
<CollapsibleTitle>More details</CollapsibleTitle>
</CollapsibleTrigger>
<CollapsibleContent>Content shown when the panel opens.</CollapsibleContent>
</Collapsible>
);
}React
Collapsible from @pelatform/react renders this details with no script, and each part is a component of its own; an Icon in the trigger needs no class.
| Prop | Values | Default |
|---|---|---|
arrow |
true ends the trigger with a chevron that turns over while open |
false |
The parts:
| Part | Element |
|---|---|
CollapsibleTrigger |
A summary with collapse-trigger |
CollapsibleTitle |
A span with collapse-title |
CollapsibleContent |
A div with collapse-content |
Other props are the element’s own, open, onToggle, className and ref included.
CSS variables
Override on a root or on a single collapsible.
| Variable | Default |
|---|---|
--plf-collapsible-bg |
Transparent |
--plf-collapsible-color |
Text, for the trigger, title and icons |
--plf-collapsible-border |
Subtle border |
--plf-collapsible-hover-bg |
Muted surface |
--plf-collapsible-content-color |
Muted text |
--plf-collapsible-radius |
Large radius (8px) |
--plf-collapsible-gap |
Space 2 (8px), inside the trigger and above the content |
--plf-collapsible-icon-size |
The control icon size (16px), for the icon and the chevron |