Layout And Organization
Disclosure Controls
A chevron that rotates 180° to reveal or hide detail in place — built from the same rotation transform the about-page uses to flip its carousel arrow.
Findings
What's actually in /ig
- transform: rotate(180deg) is used in the about-page mosaic gallery to flip a carousel arrow on a layout change.
- The chevron + height-transition pattern applies that confirmed binary rotation to an aria-expanded disclosure row.
Rationale
Why this component exists
Instagram's only confirmed rotation transform is a binary flip — 0deg to 180deg, nothing in between is styled. A disclosure control inherits exactly that: a chevron that flips rather than morphs, paired with a height transition on the revealed content rather than an opacity fade, consistent with the system's preference for transform-driven motion over fades (see Motion).
Usage
When to use it
Use when
Revealing supplementary detail in place without navigating away — an expandable caption, a settings sub-group, a 'see more' row.
Avoid when
The hidden content is the primary task content (use a dedicated page or Sheet instead) or there are more than a handful of peer items (use Tab Views).
Anatomy
Anatomy
- 01
Row label
- 02
Chevron (rotates 180°)
- 03
Revealed content region
Specification
Spacing, colour, type, and motion
- Chevron size
- 16px, matching the system icon size used across navigation
- Rotation
- rotate(0deg) → rotate(180deg), no intermediate state
- Motion
- Ease Glide, 250ms — see Motion
- Content reveal
- height: auto via max-height transition, not opacity
- Label colour
- rgb(var(--ig-primary-text)); chevron rgb(var(--ig-tertiary-text))
States
States
| State | Behaviour |
|---|---|
| Collapsed | Chevron at 0deg, content region collapsed to 0 height. |
| Expanded | Chevron at 180deg, content region expanded to its natural height. |
| Focus | Standard 2px focus ring on the row, matching every other interactive row in the system. |
Examples
Real interface compositions
Feed post
Expandable caption detail
A 'More from @mikaelastudio' row reveals tagged collaborators and location details in place; the chevron flips 180 degrees while the full row remains the tap target.
16px chevron, rotate(180deg), Ease Glide 250ms, row-level aria-expanded
Guidance
Usage guidance
- Rotate the chevron as a single instant flip target state, not a multi-frame animation — that matches the only rotation evidence found.
- Transition height, not opacity, when revealing content — opacity-only reveals aren't used for in-place disclosure anywhere comparable in the system.
Accessibility
Accessibility
- Use aria-expanded on the trigger and toggle it with the visual state — the chevron rotation should be a CSS reflection of that attribute, not an independent state.
- Keep the entire row (not just the chevron) as the click target, matching the row-level interaction pattern used throughout Lists And Tables.
Do / Don't
Do / Don't
Do
- Rotate exactly 0deg ↔ 180deg with Ease Glide, matching the one confirmed rotation transform in the system.
Don’t
- Animate a chevron through intermediate rotation states or pair it with a colour change — the evidenced pattern is a clean binary flip.
Code
Evidence-backed CSS
.disclosure__chevron {
transition: transform 250ms var(--ease-glide);
}
.disclosure[aria-expanded="true"] .disclosure__chevron {
transform: rotate(180deg);
}