ExpandablePanel

A collapsible container that toggles its body section open or closed when the header is clicked. The body animates its height smoothly on expand and collapse. A chevron icon rotates to indicate the current state. Both the header and body content are provided as render functions, giving full control over their appearance.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | renderHeader | () => ReactNode | Yes | — | Render function for the header content. | | renderBody | () => ReactNode | Yes | — | Render function for the collapsible body content. | | collapsedIconDirection | 'down' \| 'right' | No | 'down' | Direction the chevron points when the panel is collapsed. | | containerStyle | React.CSSProperties | No | — | Inline styles for the outer container. |

Usage

Basic

import ExpandablePanel from '@/components/ExpandablePanel';

export default function Example() {
  return (
    <ExpandablePanel
      renderHeader={() => <span>Shipping Information</span>}
      renderBody={() => (
        <div>
          <p>Standard delivery: 3–5 business days</p>
          <p>Express delivery: 1–2 business days</p>
        </div>
      )}
    />
  );
}

Right-pointing chevron (sidebar style)

import ExpandablePanel from '@/components/ExpandablePanel';

export default function Example() {
  return (
    <ExpandablePanel
      collapsedIconDirection="right"
      renderHeader={() => <strong>Advanced Settings</strong>}
      renderBody={() => (
        <div style={{ paddingTop: 10 }}>
          <label>
            <input type="checkbox" /> Enable debug mode
          </label>
        </div>
      )}
      containerStyle={{ borderBottom: '1px solid #eee', paddingBottom: 10 }}
    />
  );
}