Collapsible
Collapsible is a native web component (no dependencies) that reveals or hides a block of content when you click the trigger, with a smooth height animation. Use it when you need a single expandable region that's lighter than an accordion, such as showing optional details, simple FAQs, or advanced settings sections.
Preview
<pura-collapsible open>
<span slot="trigger">Order details</span>
<p>Your order has been confirmed and will ship within 2 business days. You'll receive the tracking number by email as soon as the carrier picks up the package.</p>
</pura-collapsible>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
open | boolean | false | When present, shows the content expanded. |
disabled | boolean | false | Disables the trigger, preventing opening or closing. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/collapsible.js"></script>import "./pura/lib/collapsible.js";