Collapsible
A disclosure widget with a clickable heading that toggles the visibility of its slotted content using a smooth 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 — perfect for optional details, advanced settings, or supplementary information that the user may not need immediately.
The expand/collapse animation uses a CSS grid-template-rows transition from 0fr to 1fr, producing a smooth height animation without JavaScript measurement. A chevron indicator on the right side of the heading rotates from 0 to 90 degrees when the section opens, providing a clear visual cue of the current state. 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, allowing parent components to track or persist the disclosure state. 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 proper screen reader announcements.
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 significantly
Features
- Smooth expand/collapse animation using CSS `grid-template-rows` transition (no JS measurement)
- Chevron indicator 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