useCollapsibleSections

Expanded state for several sections, with expand all and collapse all.

HooksLayout@gaudi/design-system/hooks/layout/use-collapsible-sectionsView in Storybook Source

Coordinates individual and bulk disclosure for settings pages, filter sidebars, FAQs and inspectors. The initial expansion is read once; onChange receives the expanded ids after each change. The pure reducer is exported too.

Usage

import { useCollapsibleSections } from '@gaudi/design-system/hooks';
const sections = useCollapsibleSections({ sections: ['profile', 'billing', 'privacy'], initialExpanded: ['profile'] });

Examples

Settings with expand and collapse all

Storybook

API

4 options

5 return values

Accessibility

Render each section with Collapsible or Accordion so triggers expose aria-expanded. Disable "Expand all" when everything is open rather than hiding it, so the controls do not move.

Notes

collapsibleSectionsReducer, createCollapsibleSectionsState and areAllSectionsExpanded are exported.

AccordionRich disclosure for FAQs, settings, member directories, nested help, and guided setup. Eleven patterns use Gaudi tokens, icons, avatars, cards, and pills.12 examples useElementSizeAn element's size, kept current with a ResizeObserver.useInViewWhether an element is in the viewport, from an IntersectionObserver.useScrollPositionThe vertical scroll offset of the page or a scroll container.