Collapsible
A disclosure widget with a clickable heading that toggles the visibility of its slotted content with a CSS grid animation.
<arc-collapsible>Overview
Collapsible provides a single-section disclosure pattern where clicking the heading row expands or collapses the body content below it. Unlike Accordion, which manages multiple panels with mutual exclusion, Collapsible is a standalone toggle, suited to optional details, advanced settings, or supplementary information the user may not need immediately.
The expand/collapse animation uses a CSS grid-template-rows transition from 0fr to 1fr, which animates the height without JavaScript measurement. A chevron on the right side of the heading rotates from 0 to 90 degrees when the section opens. The heading row highlights on hover with an elevated background and gains an inset accent-primary ring on focus-visible.
The component fires an arc-toggle event with an open boolean in the detail whenever the state changes, so parent components can track or persist it. The open attribute is reflected, so it can be set declaratively in HTML or toggled programmatically. The content region uses an ARIA region role with the heading text as its label for screen readers.
Guidelines
When to use
- Use Collapsible for optional or secondary content that does not need to be visible by default
- Provide a clear, descriptive `heading` so users know what the hidden content contains
- Set `open` declaratively when the content should be visible on initial render
- Use multiple Collapsibles in a stack for FAQ-style sections without mutual exclusion
- Listen to `arc-toggle` to persist the open/closed state across sessions if needed
When not to use
- Do not use Collapsible for primary content that users must see. Keep it visible instead
- Do not nest Collapsibles more than one level deep; it creates confusing disclosure hierarchies
- Do not use Collapsible when you need only-one-open-at-a-time behavior. Use Accordion instead
- Do not leave the `heading` empty; the trigger button needs visible text for usability and accessibility
- Avoid placing very tall content inside a Collapsible without a scrollable wrapper; it can push the page layout around
Features
- Expand/collapse animation using a CSS `grid-template-rows` transition (no JS measurement)
- Chevron rotates from 0 to 90 degrees to signal open/closed state
- Heading row with hover highlight and inset accent-primary focus ring
- Reflected `open` attribute for declarative or programmatic state control
- ARIA `aria-expanded` on the trigger button and `role="region"` on the content area
- Fires `arc-toggle` event with `{ open: boolean }` detail on every state change
- Keyboard support: Enter and Space toggle the disclosure from the heading button
- Respects `prefers-reduced-motion` by disabling all transitions
Preview
These settings control fine-grained behavior that most users will not need to change.
Usage
This component requires JavaScript. No pure HTML/CSS version is available. Use the Web Component directly or a framework wrapper.
<arc-collapsible heading="More Details">
<p>Hidden content revealed on click.</p>
</arc-collapsible>import { Collapsible } from '@arclux/arc-ui-react';
export default function Example() {
return (
<Collapsible heading="More Details">
<p>Hidden content revealed on click.</p>
</Collapsible>
);
}<script setup>
import { Collapsible } from '@arclux/arc-ui-vue';
</script>
<template>
<Collapsible heading="More Details">
<p>Hidden content revealed on click.</p>
</Collapsible>
</template><script>
import { Collapsible } from '@arclux/arc-ui-svelte';
</script>
<Collapsible heading="More Details">
<p>Hidden content revealed on click.</p>
</Collapsible>import { Component } from '@angular/core';
import { Collapsible } from '@arclux/arc-ui-angular';
@Component({
imports: [Collapsible],
template: `
<arc-collapsible heading="More Details">
<p>Hidden content revealed on click.</p>
</arc-collapsible>
`,
})
export class MyComponent {}import { Collapsible } from '@arclux/arc-ui-solid';
export default function Example() {
return (
<Collapsible heading="More Details">
<p>Hidden content revealed on click.</p>
</Collapsible>
);
}import { Collapsible } from '@arclux/arc-ui-preact';
export default function Example() {
return (
<Collapsible heading="More Details">
<p>Hidden content revealed on click.</p>
</Collapsible>
);
}API
headingstring''- Text displayed in the clickable trigger row. Also used as the ARIA label for the content region.
openbooleanfalse- Controls whether the content is visible. Reflected as an attribute and toggleable by clicking the heading.
Events
arc-toggledetail:{ open: boolean }- Fired when the collapsible expands or collapses