Collapsible Panel

A compound component that provides a collapsible panel with a header and content area. The header can be clicked to toggle the visibility of the content.

This panel starts expanded. Click the header to collapse it.

This panel starts collapsed. Click the header to expand it and see this content.

This panel contains more content to demonstrate the smooth animation.

  • Item one
  • Item two
  • Item three

Installation

Install the following dependencies

Loading...

bash

API Reference

Component props

CollapsiblePanel

PropTypeDefaultDescription
isExpandedboolean-Whether the panel content is currently expanded or collapsed.
onToggle() => void-Callback function called when the panel header is clicked to toggle the expanded state.
childrenReactNode-Child components, typically CollapsiblePanelHeader and CollapsiblePanelContent.
classNamestring-Additional CSS classes to apply to the panel container.

CollapsiblePanelHeader

PropTypeDefaultDescription
childrenReactNode-The content to display in the header. A chevron icon is automatically added to indicate the expand/collapse state.
classNamestring-Additional CSS classes to apply to the header button.

CollapsiblePanelContent

PropTypeDefaultDescription
childrenReactNode-The content to display when the panel is expanded.
classNamestring-Additional CSS classes to apply to the content container.

Behavior

The component uses a context-based pattern for state management:

  • CollapsiblePanel provides a context that contains the isExpanded state and onToggle callback.
  • CollapsiblePanelHeader uses the context to access the toggle function and displays a chevron icon that rotates based on the expanded state.
  • CollapsiblePanelContent uses the context to conditionally show/hide content with smooth transitions.
  • The content area uses CSS transitions with max-height and opacity for smooth expand/collapse animations (300ms duration).
  • The component includes proper ARIA attributes (aria-expanded and aria-controls) for accessibility.
  • All standard HTML attributes are supported through spread props on each component.

Usage Example

Basic usage with state management

Loading...

tsx