Core Collapse Component

The Collapse component is the main container that manages the state and rendering of collapsible panels. It supports both accordion mode (single panel open) and collapse mode (multiple panels open).

Component API

declare const Collapse: React.ForwardRefExoticComponent<CollapseProps & React.RefAttributes<HTMLDivElement>>;

interface CollapseProps {
  prefixCls?: string;
  activeKey?: React.Key | React.Key[];
  defaultActiveKey?: React.Key | React.Key[];
  openMotion?: CSSMotionProps;
  onChange?: (key: React.Key[]) => void;
  accordion?: boolean;
  className?: string;
  style?: object;
  destroyInactivePanel?: boolean;
  expandIcon?: (props: CollapsePanelProps) => React.ReactNode;
  collapsible?: CollapsibleType;
  children?: React.ReactNode;
  items?: ItemType[];
}

type CollapsibleType = 'header' | 'icon' | 'disabled';

Props Documentation

State Management Props

• activeKey: React.Key | React.Key[] - Currently active panel keys for controlled usage
• defaultActiveKey: React.Key | React.Key[] - Default active panel keys for uncontrolled usage
• onChange: (key: React.Key[]) => void - Callback fired when panel active state changes

Mode Configuration

• accordion: boolean - When true, only one panel can be open at a time (default: false)

Content Configuration

• items: ItemType[] - Panel configuration array (recommended approach)
• children: React.ReactNode - Legacy Panel components (deprecated)

Behavior Props

• destroyInactivePanel: boolean - Destroy inactive panel content for performance (default: false)
• collapsible: CollapsibleType - Global collapsible behavior for all panels
  • 'header': Click header to toggle
  • 'icon': Click expand icon to toggle
  • 'disabled': Panels cannot be toggled

Styling Props

• prefixCls: string - CSS class prefix (default: 'rc-collapse')
• className: string - Custom CSS class for the container
• style: object - Inline styles for the container

Animation Props

• openMotion: CSSMotionProps - rc-motion configuration for expand/collapse animations
• expandIcon: (props: CollapsePanelProps) => React.ReactNode - Custom expand icon renderer

Usage Examples

Basic Collapse

import Collapse from "rc-collapse";

const BasicExample = () => {
  const items = [
    { key: '1', label: 'Section 1', children: 'Content 1' },
    { key: '2', label: 'Section 2', children: 'Content 2' },
    { key: '3', label: 'Section 3', children: 'Content 3' },
  ];

  return <Collapse items={items} />;
};

Controlled Accordion

import React, { useState } from 'react';
import Collapse from "rc-collapse";

const ControlledAccordion = () => {
  const [activeKey, setActiveKey] = useState<string>('1');

  const items = [
    { key: '1', label: 'Panel 1', children: 'Content 1' },
    { key: '2', label: 'Panel 2', children: 'Content 2' },
  ];

  return (
    <Collapse
      accordion
      activeKey={activeKey}
      onChange={(keys) => setActiveKey(keys[0] || '')}
      items={items}
    />
  );
};

Custom Expand Icon

import Collapse from "rc-collapse";

const CustomIconExample = () => {
  const expandIcon = ({ isActive }) => (
    <span style={{ transform: `rotate(${isActive ? 90 : 0}deg)` }}>
      ▶
    </span>
  );

  const items = [
    { key: '1', label: 'Custom Icon Panel', children: 'Content' },
  ];

  return (
    <Collapse
      expandIcon={expandIcon}
      items={items}
    />
  );
};

Performance Optimization

import Collapse from "rc-collapse";

const PerformanceExample = () => {
  const items = [
    {
      key: '1',
      label: 'Heavy Content Panel',
      children: <ExpensiveComponent />,
      destroyInactivePanel: true, // Override global setting
    },
    {
      key: '2',
      label: 'Always Rendered Panel',
      children: <LightComponent />,
      forceRender: true,
    },
  ];

  return (
    <Collapse
      destroyInactivePanel={true}
      items={items}
    />
  );
};

Accessibility

The Collapse component includes built-in accessibility features:

• ARIA Roles: Uses tablist/tab for accordion mode, button for collapse mode
• Keyboard Navigation: Enter key toggles panel state
• Screen Reader Support: Proper aria-expanded and aria-disabled attributes
• Focus Management: Keyboard navigation between panels with proper tabIndex handling

State Behavior

Accordion Mode (accordion={true})

• Only one panel can be active at a time
• Opening a panel automatically closes the previously active panel
• activeKey should be a single key (arrays use first element)

Collapse Mode (accordion={false})

• Multiple panels can be active simultaneously
• activeKey can be an array of keys
• Independent panel state management