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
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
-
openbooleanfalse - Controls whether the content is visible. Reflected as an attribute and toggleable by clicking the heading.
-
headingstring'' - Text displayed in the clickable trigger row. Also used as the ARIA label for the content region.
Events
-
arc-toggledetail: { open: boolean } - Fired when the collapsible expands or collapses