DEV Community

Patrick Moore
Patrick Moore

Posted on

Getting Started with React Accessible Accordion: Building Collapsible Content

#javascript #tutorial #webdev #beginners

React Accessible Accordion is a library for creating accessible, keyboard-navigable accordion components in React applications. It provides ARIA attributes, keyboard support, and smooth animations for creating collapsible content sections. This guide walks through setting up and creating accordions using React Accessible Accordion with React, from installation to a working implementation.

Prerequisites

Before you begin, make sure you have:

  • Node.js version 14.0 or higher installed
  • npm, yarn, or pnpm package manager
  • A React project (version 16.8 or higher) or create-react-app setup
  • Basic knowledge of React components
  • Familiarity with JavaScript/TypeScript

Installation

Install React Accessible Accordion using your preferred package manager:

npm install react-accessible-accordion
Enter fullscreen mode Exit fullscreen mode

Or with yarn:

yarn add react-accessible-accordion
Enter fullscreen mode Exit fullscreen mode

Or with pnpm:

pnpm add react-accessible-accordion
Enter fullscreen mode Exit fullscreen mode

After installation, your package.json should include:

{
  "dependencies": {
    "react-accessible-accordion": "^0.1.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}
Enter fullscreen mode Exit fullscreen mode

Project Setup

React Accessible Accordion requires minimal setup. Import the components and you're ready to use them.

First Example / Basic Usage

Let's create a simple accordion. Create a new file src/AccordionExample.jsx:

// src/AccordionExample.jsx
import React from 'react';
import {
  Accordion,
  AccordionItem,
  AccordionItemHeading,
  AccordionItemButton,
  AccordionItemPanel
} from 'react-accessible-accordion';
import 'react-accessible-accordion/dist/fancy-example.css';

function AccordionExample() {
  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Basic Accordion Example</h2>
      <Accordion allowZeroExpanded>
        <AccordionItem>
          <AccordionItemHeading>
            <AccordionItemButton>
              What is React?
            </AccordionItemButton>
          </AccordionItemHeading>
          <AccordionItemPanel>
            <p>
              React is a JavaScript library for building user interfaces, particularly web applications.
            </p>
          </AccordionItemPanel>
        </AccordionItem>
        <AccordionItem>
          <AccordionItemHeading>
            <AccordionItemButton>
              What is an Accordion?
            </AccordionItemButton>
          </AccordionItemHeading>
          <AccordionItemPanel>
            <p>
              An accordion is a UI component that allows users to expand and collapse content sections.
            </p>
          </AccordionItemPanel>
        </AccordionItem>
        <AccordionItem>
          <AccordionItemHeading>
            <AccordionItemButton>
              Why use React Accessible Accordion?
            </AccordionItemButton>
          </AccordionItemHeading>
          <AccordionItemPanel>
            <p>
              React Accessible Accordion provides accessible, keyboard-navigable accordions with ARIA support.
            </p>
          </AccordionItemPanel>
        </AccordionItem>
      </Accordion>
    </div>
  );
}

export default AccordionExample;
Enter fullscreen mode Exit fullscreen mode

Update your App.jsx:

// src/App.jsx
import React from 'react';
import AccordionExample from './AccordionExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <AccordionExample />
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

This creates a basic accordion with collapsible content sections.

Understanding the Basics

React Accessible Accordion uses a component-based structure:

  • Accordion: Main container component
  • AccordionItem: Individual accordion item
  • AccordionItemHeading: Header section
  • AccordionItemButton: Clickable button in header
  • AccordionItemPanel: Collapsible content panel
  • Accessibility: Built-in ARIA attributes and keyboard support

Key concepts:

  • Component structure: Accordion contains AccordionItems
  • Expansion: Items expand/collapse on click
  • Accessibility: Full keyboard navigation and screen reader support
  • Styling: Import CSS file for default styles
  • Configuration: Use props to control behavior

Here's an example with pre-expanded items:

// src/AdvancedAccordionExample.jsx
import React from 'react';
import {
  Accordion,
  AccordionItem,
  AccordionItemHeading,
  AccordionItemButton,
  AccordionItemPanel
} from 'react-accessible-accordion';
import 'react-accessible-accordion/dist/fancy-example.css';

function AdvancedAccordionExample() {
  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Advanced Accordion Example</h2>
      <Accordion allowZeroExpanded allowMultipleExpanded preExpanded={[0]}>
        <AccordionItem uuid="item-1">
          <AccordionItemHeading>
            <AccordionItemButton>
              Section 1 (Pre-expanded)
            </AccordionItemButton>
          </AccordionItemHeading>
          <AccordionItemPanel>
            <p>This section is pre-expanded when the component loads.</p>
            <p>You can have multiple paragraphs and content here.</p>
          </AccordionItemPanel>
        </AccordionItem>
        <AccordionItem uuid="item-2">
          <AccordionItemHeading>
            <AccordionItemButton>
              Section 2
            </AccordionItemButton>
          </AccordionItemHeading>
          <AccordionItemPanel>
            <p>This is the content for section 2.</p>
            <ul>
              <li>Item 1</li>
              <li>Item 2</li>
              <li>Item 3</li>
            </ul>
          </AccordionItemPanel>
        </AccordionItem>
        <AccordionItem uuid="item-3">
          <AccordionItemHeading>
            <AccordionItemButton>
              Section 3
            </AccordionItemButton>
          </AccordionItemHeading>
          <AccordionItemPanel>
            <p>This is the content for section 3.</p>
          </AccordionItemPanel>
        </AccordionItem>
      </Accordion>
    </div>
  );
}

export default AdvancedAccordionExample;
Enter fullscreen mode Exit fullscreen mode

Practical Example / Building Something Real

Let's build a comprehensive FAQ accordion:

// src/FAQAccordion.jsx
import React from 'react';
import {
  Accordion,
  AccordionItem,
  AccordionItemHeading,
  AccordionItemButton,
  AccordionItemPanel
} from 'react-accessible-accordion';
import 'react-accessible-accordion/dist/fancy-example.css';

function FAQAccordion() {
  const faqItems = [
    {
      id: 'faq-1',
      question: 'How do I get started?',
      answer: 'To get started, install the library using npm or yarn, then import the components and start building your accordion.'
    },
    {
      id: 'faq-2',
      question: 'Is it accessible?',
      answer: 'Yes, React Accessible Accordion is fully accessible with ARIA attributes and keyboard navigation support.'
    },
    {
      id: 'faq-3',
      question: 'Can I customize the styling?',
      answer: 'Yes, you can customize the styling using CSS. The library provides default styles that you can override.'
    },
    {
      id: 'faq-4',
      question: 'Does it support multiple expanded items?',
      answer: 'Yes, you can enable multiple expanded items by setting the allowMultipleExpanded prop to true.'
    },
    {
      id: 'faq-5',
      question: 'Is it mobile-friendly?',
      answer: 'Yes, the accordion is responsive and works well on mobile devices with touch support.'
    }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h1>Frequently Asked Questions</h1>
      <Accordion allowZeroExpanded>
        {faqItems.map((item) => (
          <AccordionItem key={item.id} uuid={item.id}>
            <AccordionItemHeading>
              <AccordionItemButton>
                {item.question}
              </AccordionItemButton>
            </AccordionItemHeading>
            <AccordionItemPanel>
              <p>{item.answer}</p>
            </AccordionItemPanel>
          </AccordionItem>
        ))}
      </Accordion>
    </div>
  );
}

export default FAQAccordion;
Enter fullscreen mode Exit fullscreen mode

Now create a settings accordion:

// src/SettingsAccordion.jsx
import React from 'react';
import {
  Accordion,
  AccordionItem,
  AccordionItemHeading,
  AccordionItemButton,
  AccordionItemPanel
} from 'react-accessible-accordion';
import 'react-accessible-accordion/dist/fancy-example.css';

function SettingsAccordion() {
  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Settings</h2>
      <Accordion allowZeroExpanded allowMultipleExpanded>
        <AccordionItem uuid="general">
          <AccordionItemHeading>
            <AccordionItemButton>
              General Settings
            </AccordionItemButton>
          </AccordionItemHeading>
          <AccordionItemPanel>
            <div style={{ padding: '20px' }}>
              <label style={{ display: 'block', marginBottom: '10px' }}>
                <input type="checkbox" style={{ marginRight: '5px' }} />
                Enable notifications
              </label>
              <label style={{ display: 'block', marginBottom: '10px' }}>
                <input type="checkbox" style={{ marginRight: '5px' }} />
                Dark mode
              </label>
            </div>
          </AccordionItemPanel>
        </AccordionItem>
        <AccordionItem uuid="privacy">
          <AccordionItemHeading>
            <AccordionItemButton>
              Privacy Settings
            </AccordionItemButton>
          </AccordionItemHeading>
          <AccordionItemPanel>
            <div style={{ padding: '20px' }}>
              <label style={{ display: 'block', marginBottom: '10px' }}>
                <input type="checkbox" style={{ marginRight: '5px' }} />
                Share analytics data
              </label>
              <label style={{ display: 'block', marginBottom: '10px' }}>
                <input type="checkbox" style={{ marginRight: '5px' }} />
                Allow cookies
              </label>
            </div>
          </AccordionItemPanel>
        </AccordionItem>
        <AccordionItem uuid="account">
          <AccordionItemHeading>
            <AccordionItemButton>
              Account Settings
            </AccordionItemButton>
          </AccordionItemHeading>
          <AccordionItemPanel>
            <div style={{ padding: '20px' }}>
              <div style={{ marginBottom: '10px' }}>
                <label style={{ display: 'block', marginBottom: '4px' }}>
                  Email:
                </label>
                <input
                  type="email"
                  defaultValue="user@example.com"
                  style={{
                    width: '100%',
                    padding: '8px',
                    border: '1px solid #ddd',
                    borderRadius: '4px',
                    boxSizing: 'border-box'
                  }}
                />
              </div>
              <button
                style={{
                  padding: '8px 16px',
                  backgroundColor: '#007bff',
                  color: 'white',
                  border: 'none',
                  borderRadius: '4px',
                  cursor: 'pointer'
                }}
              >
                Save Changes
              </button>
            </div>
          </AccordionItemPanel>
        </AccordionItem>
      </Accordion>
    </div>
  );
}

export default SettingsAccordion;
Enter fullscreen mode Exit fullscreen mode

Update your App.jsx:

// src/App.jsx
import React from 'react';
import FAQAccordion from './FAQAccordion';
import SettingsAccordion from './SettingsAccordion';
import './App.css';

function App() {
  return (
    <div className="App">
      <FAQAccordion />
      <SettingsAccordion />
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

This example demonstrates:

  • FAQ accordion
  • Settings accordion with forms
  • Multiple expanded items
  • Custom content in panels
  • Keyboard navigation
  • Accessible structure

Common Issues / Troubleshooting

  1. Accordion not displaying: Make sure you've imported the CSS file (import 'react-accessible-accordion/dist/fancy-example.css'). The accordion requires styles to render correctly.

  2. Items not expanding: Check that you're using the correct component structure. Each AccordionItem must contain AccordionItemHeading and AccordionItemPanel.

  3. Multiple items not expanding: Set allowMultipleExpanded={true} on the Accordion component to allow multiple items to be expanded at once.

  4. Pre-expanded not working: Use the preExpanded prop with an array of UUIDs or indices. Make sure the UUIDs match the uuid prop on AccordionItem.

  5. Styling issues: Import the CSS file for default styles. You can override styles using CSS or by using a different CSS file provided by the library.

  6. Keyboard navigation not working: Keyboard navigation is enabled by default. If it's not working, check for CSS conflicts or ensure the accordion is properly rendered.

Next Steps

Now that you have a basic understanding of React Accessible Accordion:

  • Learn about advanced accordion configurations
  • Explore custom styling options
  • Implement accordion state management
  • Add animations and transitions
  • Create nested accordions
  • Learn about other accordion libraries
  • Check the official repository: https://github.com/springload/react-accessible-accordion

Summary

You've successfully set up React Accessible Accordion in your React application and created FAQ and settings accordions with accessible, keyboard-navigable functionality. React Accessible Accordion provides a simple solution for creating accessible collapsible content sections.

SEO Keywords

react-accessible-accordion
React accordion component
react-accessible-accordion tutorial
React collapsible content
react-accessible-accordion installation
React accessible UI
react-accessible-accordion example
React FAQ accordion
react-accessible-accordion setup
React keyboard navigation
react-accessible-accordion customization
React ARIA accordion
react-accessible-accordion accessibility
React accordion library
react-accessible-accordion getting started

Top comments (0)