Components · Data display
Collapsible
BetaShows and hides one section.
- Source
components/ui/collapsible.tsx - shadcn/ui Collapsible
- Figma: not linked yet (Q13)
Upper body A
6 exercises, about 50 min
Warm up with 2 light sets before the bench press.
When to use
- To show and hide one section that most coaches don't need every time: the full coach notes on a workout card, advanced options in a form.
- To keep a card or form short, with the first line or the common fields always visible.
When not to use
- For several sections that open and close the same way: use an Accordion.
- For content the coach needs to finish the task, such as a required field: show it.
- To switch between views: use Tabs.
- For a short hint: use a tooltip or helper text.
Anatomy
Rest 2 minutes between sets.
- 1. Collapsible: wraps the trigger and the content, and holds the open state
- 2. Trigger: a button; the chevron turns when open
- 3. Content: shown when open, removed from the page when closed
Variants
Collapsible has no visual variants: it adds behavior to the trigger and content you give it. Two patterns cover most uses.
| Pattern | Use for |
|---|---|
| Show more | A summary that is always visible, with the rest underneath: the first coach note, then the other notes. |
| Advanced options | Optional settings under the common ones in a form: default rest time, deload weeks. |
Start open with defaultOpen, or control it with open and onOpenChange to remember the coach's choice.
States
| State | What changes | Token |
|---|---|---|
| Closed | Content is removed; chevron points down; data-state="closed" | — |
| Open | Content shows; chevron turns 180°; data-state="open" | duration-(--duration-base) (on the chevron, in the examples) |
| Trigger hover, focus-visible, disabled | From the Button used as the trigger | hover:bg-accent, ring-ring/50, opacity-(--opacity-disabled) |
The component itself has no styles. Style the trigger with a Button (asChild), as the examples do, and the content with the layout around it.
Usage guidelines
- Keep the trigger in the same place when the content opens, above or before the content, so the coach can close it again without hunting.
- Use a chevron that turns, not a plus that becomes a minus, to match the accordion.
- Closed by default, unless most coaches open it every time.
- Don't put a collapsible inside another collapsible.
Content guidelines
- The trigger names the content, not the action: "Coach notes", "Advanced options". The open or closed state is shown by the chevron and announced by the screen reader.
- If you prefer "Show more" wording, change it with the state ("Show all notes", "Show fewer notes"); don't leave "Show more" on an open section.
- Sentence case, no punctuation, no counts that go stale.
- Arabic: a short noun phrase, "ملاحظات المدرب"، "خيارات متقدمة".
Accessibility
| Key | Does |
|---|---|
| Tab | Moves to the trigger, then into the content when it is open |
| Enter / Space | Opens or closes the content |
- The trigger is a
buttonwitharia-expandedandaria-controls. Announced as "Coach notes, button, collapsed", then "expanded". - Focus stays on the trigger when the content opens. The content comes right after it in the reading order, so the next Tab or arrow down reaches it.
- Closed content is removed from the page, so in-page search (Ctrl+F) can't find it. Keep anything a coach would search for visible.
- The content has no role. If it is a large section, give it a heading inside.
RTL
The trigger and content follow the reading order. The chevron points down and turns up when open, so it doesn't mirror. Lists inside use logical padding (ps-5).
Tokens used
components/ui/collapsible.tsx has no classes, so it reads no tokens. The trigger reads Button's tokens, and the chevron turns with duration-(--duration-base). The generated table is left out because it would be empty.
Props
<Collapsible>
Also takes every prop of Radix Collapsible.Root
No props of its own.
<CollapsibleTrigger>
Also takes every prop of Radix Collapsible.CollapsibleTrigger
No props of its own.
<CollapsibleContent>
Also takes every prop of Radix Collapsible.CollapsibleContent
No props of its own.
open, defaultOpen, onOpenChange and disabled come from Radix Collapsible; forceMount on CollapsibleContent keeps closed content in the page.
Replaces in coach-admin
From the read-only audit of coach-admin: 18 style values, 18 uses.
collapse-toggle-button is coach-admin's own show and hide control, including a rail version. The "see more" link on grouped to-do cards is the same pattern.
Classes and selectors
.collapse-toggle-btn3.todo-grouped-card__see-more2.collapse-toggle-btn__rail-label1.collapse-toggle-btn--rail1.collapse-toggle-btn__icon1.todo-grouped-card__see-more-icon1
Files
src/reusableComponents/collapse-toggle-button/collapse-toggle-button.scss15
The inventory lists the first 12 locations of each value, so file counts are a lower bound.
SCSS variables in these styles
$spacing-smnot a color: spacing, size or layout$min-tap-target-sizenot a color: spacing, size or layout$subtitle-text-color→--muted-foreground$light-primary-colornot a color: spacing, size or layout$light-surface-bg→--muted$spacing-2xsnot a color: spacing, size or layout$primary-color→--primary