Create Accordion in React JS with Demo and Source Code

Introduction

Accordions are a popular UI component that helps organize content in a collapsible format, making it easier to navigate complex information. In this blog, we'll walk you through creating an accordion component using React JS. Whether you're new to React or looking to enhance your skills, this guide will provide you with clear and simple instructions to build a functional accordion from scratch.

Setup Environment

Before we dive into the code, let's set up our development environment. Follow these steps:

1. Install Node.js and npm: React requires Node.js and npm (Node Package Manager). Download and install the latest version from Node.js official website.
2. Create a React App: Open your terminal and run the following command to create a new React project:

   npx create-react-app accordion-component

   Replace accordion-component with your preferred project name.

3. Navigate to Your Project Directory:

   cd accordion-component

4. Start the Development Server:

   npm start

   This will open your React app in the browser and you’ll see the default React welcome page.

Step-by-Step Guide

1. Create the Accordion Component

Create a new file named Accordion.js in the src folder of your project. This file will contain our accordion component code.

src/Accordion.js

import React, { useState, useRef } from 'react';
import './Accordion.css';

const Accordion = () => {
  const [activeIndex, setActiveIndex] = useState(null);
  const contentRef = useRef([]);

  const toggleAccordion = (index) => {
    setActiveIndex(activeIndex === index ? null : index);
  };

  return (
    <div className="accordion-container">
      <h2>Accordion</h2>
      <div className="accordion">
        {accordionData.map((item, index) => (
          <div
            key={index}
            className={`accordion-item ${activeIndex === index ? 'active' : ''}`}
          >
            <button
              className="accordion-header"
              onClick={() => toggleAccordion(index)}
            >
              <span className="accordion-title">{item.title}</span>
              <span className="accordion-icon">+</span>
            </button>
            <div
              className="accordion-content"
              ref={(el) => (contentRef.current[index] = el)}
              style={{
                maxHeight: activeIndex === index ? `${contentRef.current[index]?.scrollHeight}px` : '0',
                paddingBottom: activeIndex === index ? '16px' : '0',
              }}
            >
              <p>{item.content}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

const accordionData = [
  {
    title: "What is Modern Accordion?",
    content: "An accordion is a vertically stacked list of items, each with a header that can be clicked to expand or collapse its content."
  },
  {
    title: "How does it work?",
    content: "Accordion sections can expand or collapse to show or hide content, helping reduce visual clutter."
  },
  {
    title: "Why use an Accordion?",
    content: "It allows users to consume content in small chunks, making it easier to navigate and more user-friendly."
  }
];

export default Accordion;

2. Style the Accordion

Create a new file named Accordion.css in the src folder to add some basic styling.

src/Accordion.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: 'Poppins', sans-serif;
    background-color: #825cff; 
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 20px;
  }
  
  .accordion-container {
    background-color: #fff; 
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 600px;
  }
  
  h2 {
    text-align: center;
    font-weight: 600;
    color: #825cff; 
    margin-bottom: 20px;
  }
  
  .accordion {
    border-radius: 10px;
  }
  
  .accordion-item {
    border-bottom: 1px solid #eee; 
    transition: background-color 0.3s ease;
  }
  
  .accordion-item:last-child {
    border-bottom: none;
  }
  
  .accordion-header {
    width: 100%;
    background-color: #f7f7f7; 
    font-family: 'Poppins', sans-serif;
    padding: 16px 24px;
    cursor: pointer;
    border: none;
    outline: none;
    font-size: 18px;
    font-weight: 600;
    color: #333; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease;
  }
  
  .accordion-header:hover {
    background-color: #e0e0e0; 
  }
  
  .accordion-title {
    font-weight: 500;
  }
  
  .accordion-icon {
    font-size: 22px;
    transition: transform 0.3s ease, color 0.3s ease;
  }
  
  .accordion-item.active .accordion-icon {
    transform: rotate(45deg);
    color: #825cff; 
  }
  
  .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, padding-bottom 0.5s ease;
    padding: 0 24px;
    background-color: #d8baff; 
  }
  
  .accordion-content p {
    padding: 16px 0;
    color: #4b2e77; 
    font-size: 16px;
    line-height: 1.6;
  }
  
  .accordion-item.active .accordion-content {
    max-height: 300px; 
    padding-bottom: 16px; 
  }
  
  .accordion-item.active {
    background-color: #f0f0f0; 
  }

3. Use the Accordion Component

Open the App.js file and use the Accordion component.

src/App.js

import React from 'react';
import Accordion from './Accordion'; 
import './App.css'; 

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

export default App;

Conclusion

Creating an accordion in React JS is a straightforward process that involves setting up a React project, writing the accordion component, styling it, and then using it in your application. With this simple guide, you can now add collapsible sections to your React app, enhancing its usability and organization. Play around with the styles and functionality to customize the accordion to fit your specific needs.

Accordion Live Demo ⟶

That’s a wrap!

I hope you enjoyed this article

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊