React Collapse Guide: install, examples, accordion & smooth animation

Quick answer: react-collapse is a lightweight React component that animates height to show and hide content (collapsible content / expand-collapse behavior). Use it for panels, accordions, and collapsible sections where content height is dynamic and smooth collapse is required.

What is react-collapse and when to use it?

react-collapse is a focused library that provides a controlled Collapse component for React. It measures content height and animates the height property so that expanding and collapsing feel smooth and predictable — ideal for React collapsible content, animations, and accordion components.

Unlike CSS-only toggles that rely on max-height hacks, react-collapse reads content height and transitions the wrapper, which reduces layout jumpiness and keeps DOM content accessible to screen readers. That makes it a pragmatic choice when implementing React collapsible sections where content size varies.

Use react-collapse when you need a straightforward expand collapse behavior, integration with controlled state, and a small dependency instead of a heavy UI framework. For a hands-on walkthrough, see this guide on building collapsible content with react-collapse on Dev.to.

Quick links: building collapsible content with react-collapse, react-collapse on npm, React docs.

Getting started and installation

To add react-collapse to your project, install the package from npm or yarn. This installs a tiny dependency that exports a Collapse component you can control via props like isOpened.

// npm
npm install react-collapse

// yarn
yarn add react-collapse

After installation, import the component and manage its open/closed state with React state (useState/useReducer). The library is intentionally minimal: it handles height measurement and transition timing, leaving styling, icons, and layout to you.

If you prefer a complete starter, combine the package with your existing component library or write a small wrapper for accordion behavior. For installation details and a walkthrough, check the step-by-step tutorial: Dev.to: Building Collapsible Content with react-collapse.

Example: basic collapse and accordion component

Below is a compact, copy-paste friendly example of a basic controlled collapse. It demonstrates toggling the content panel using a button and the isOpened prop.

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

function SimpleCollapse() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setIsOpen(o => !o)} aria-expanded={isOpen}>
        {isOpen ? 'Hide' : 'Show'} details
      </button>
      <Collapse isOpened={isOpen}>
        <div style={{padding:16}}>
          This is collapsible content. Replace this with your text or components.
        </div>
      </Collapse>
    </div>
  );
}

To build an accordion (only one open panel at a time), manage an index or id for the currently opened item. When a new panel is opened, set the active index to its id and close any previously open item. This pattern keeps the UI predictable for users and screen readers.

Accordion example approach (concept): keep an integer state activeIndex, render multiple panels, and set isOpened={index === activeIndex} on each Collapse. Add keyboard handlers (ArrowUp/ArrowDown) to move focus between headers for better UX.

Customization and smooth animations

react-collapse animates height by measuring the content’s natural height and transitioning the wrapper from 0 to that value. For smoother visuals, avoid animating large, complex trees. Instead, animate a lightweight wrapper and keep inner elements static where possible.

For additional polish, combine react-collapse with CSS transitions for opacity or transform on inner elements. Example: fade in children while the height grows. If you need physics-based animation, pair the library with react-spring for complex motion, but know that react-collapse solves the common case without extra complexity.

Customize timing and easing through CSS applied to the collapse wrapper. Also control the collapse’s initial state (closed/open) and whether it should mount/unmount content. If you need immediate unmounting on close to reduce DOM weight, handle that by conditionally rendering the Collapse child when closed (but expect a visual jump unless you animate opacity).

Accessibility and best practices

Accessible collapsible content requires clear focusable triggers, ARIA attributes, and predictable keyboard behavior. Use button elements for toggles, set aria-expanded, and add aria-controls pointing to the collapsible panel’s id. Wrap the content region in a container with role="region" and an accessible label if needed.

Keyboard navigation: let users open/close panels with Space/Enter and traverse multiple headers with Arrow keys in accordion patterns. Ensure focus management doesn’t inadvertently trap keyboard users; for instance, when a panel opens, focus can either remain on the control or move into the newly revealed content — pick a behavior and implement it consistently.

Respect user preferences: if a user prefers reduced motion (prefers-reduced-motion), avoid animating height or shorten animation durations. Check for the media query in JS/CSS and adjust behavior to reduce potential motion sickness.

Troubleshooting common issues

Flicker/jump on first render: if the height measurement happens before fonts or images load, you may see a jump when content size changes. Mitigate by ensuring critical fonts are loaded early (preload) or by delaying initial measurement until content is stable.

Content overflow inside panels: if your inner content scrolls or contains large elements, use overflow rules carefully. Keep the collapse wrapper handling the height; inner scrollable areas should be bounded with a max-height or separate scroll container to avoid double-scroll UX.

Animation looks choppy on mobile: reduce animation duration, avoid heavy shadow/blur on the collapsing elements, and consider using requestAnimationFrame-friendly approaches. Also ensure your dev build is not blocking the main thread with heavy computations during transitions.

• How to create a collapsible panel with react-collapse?
• How to install react-collapse and import Collapse?
• How to build an accordion using react-collapse?
• How to make react-collapse animation smooth?
• React collapse customization: props and styling?
• Accessibility for collapsible sections in React?
• Troubleshooting react-collapse content jump?

FAQ

How do I install and import react-collapse?

Install via npm install react-collapse or yarn add react-collapse. Then import the component: import { Collapse } from 'react-collapse'. Use the isOpened prop to control whether the content is expanded.

How can I build an accordion with react-collapse?

Maintain a single active index (or id) in state. Render multiple panels and set isOpened={index === activeIndex} on each panel. Update the active index when a header is clicked; this ensures only one panel is open at a time. Add keyboard handling for Arrow keys for better accessibility.

How do I make react-collapse animation smoother?

Smooth animations come from reducing expensive paints and combining subtle opacity/transform transitions with the height animation. Keep inner content simple during transitions, preload fonts/images, and respect prefers-reduced-motion to disable or shorten animations when necessary.

Semantic core (keyword clusters)

Primary keywords:
react-collapse
React collapsible content
react-collapse tutorial
React expand collapse
react-collapse installation
React accordion component
react-collapse example
React collapse animation
react-collapse setup
React collapsible section

Secondary keywords:
react-collapse customization
React collapse library
react-collapse FAQ
React smooth collapse
react-collapse getting started
react-collapse npm
react-collapse isOpened prop
react collapse accordion example
react-collapse controlled component

LSI / clarifying long-tail queries:
how to animate collapse in react
react-collapse vs css collapse
react collapse accessibility aria-expanded
collapse height animation react
react expand collapse tutorial example
react-collapse smooth transition tips
best practices for react collapsible sections

Backlinks: For a practical tutorial and example code, see the Dev.to guide on building collapsible content with react-collapse: building collapsible content with react-collapse. For package details and props, visit the react-collapse npm page.