Building a Simple React Accordion — Explained for Total Beginners

Building a Simple React Accordion — Explained for Total Beginners

Accordion components are everywhere: FAQs, settings pages, dashboards — almost every modern UI uses some form of collapsible content.
In this article, we’ll walk through a working accordion project built with React, understand the code step by step, and learn what each part does.

Below is the exact code from the project, followed by a clear explanation.

1. The Data File — data.js

This file stores your accordion content.

export const data = [
  {
    id: 1,
    question: "What is an accordion component?",
    answer:
      "An accordion component is a user interface element that allows users to expand and collapse sections of content.",
  },
  {
    id: 2,
    question: "How does the accordion work?",
    answer:
      "The accordion works by toggling the visibility of content when a user clicks on a section header, showing or hiding additional information.",
  },
  {
    id: 3,
    question: "What is the purpose of using an accordion?",
    answer:
      "The purpose of using an accordion is to save space on the user interface by showing only a part of the content and allowing users to expand sections as needed.",
  },
  {
    id: 4,
    question: "Can accordions have multiple sections open?",
    answer:
      "Yes, accordions can be designed to allow either single or multiple sections to be open at the same time, depending on the implementation.",
  },
  {
    id: 5,
    question: "Are accordions used in modern web design?",
    answer:
      "Yes, accordions are widely used in modern web design, especially in FAQs, menus, and dashboards for organizing large amounts of content.",
  },
];

What this file does

  • It exports an array of objects.
  • Each object has:
  • id: a unique number
  • question: the header
  • answer: the hidden text that shows when opened
  • The accordion uses this data to generate the UI dynamically.

2. The Main Component — index.jsx

import React, { useState } from "react";
import { data } from "./data.js";

export default function App() {
  const [selected, setSelected] = useState(null);
  const [enableMultiSelection, setEnableMultiSelection] = useState(false);
  const [multiple, setMultiple] = useState([]);
  function handleSingleSelection(id) {
    setSelected(id === selected ? null : id);
  }
  function handleMultiSelection(id) {
    let list = [...multiple];
    const index = list.indexOf(id);
    if (index === -1) list.push(id);
    else list.splice(index, 1);
    setMultiple(list);
  }
  return (
    <div className="wrapper">
      <button
        onClick={() => setEnableMultiSelection(!enableMultiSelection)}
      >
        {enableMultiSelection ? "Disable Multi Selection" : "Enable Multi Selection"}
      </button>
      <div className="accordion">
        {data.map((item) => (
          <div className="item" key={item.id}>
            <div
              className="title"
              onClick={() =>
                enableMultiSelection
                  ? handleMultiSelection(item.id)
                  : handleSingleSelection(item.id)
              }
            >
              <h3>{item.question}</h3>
              <span>+</span>
            </div>
            {selected === item.id ||
            multiple.indexOf(item.id) !== -1 ? (
              <div className="content">{item.answer}</div>
            ) : null}
          </div>
        ))}
      </div>
    </div>
  );
}

State Variables

State Purpose selected Stores the ID of the opened item (single mode). enableMultiSelection Toggles between single/multi mode. multiple Stores an array of opened IDs in multi mode.

Single Selection Function

function handleSingleSelection(id) {
  setSelected(id === selected ? null : id);
}
  • If you click the same item → it closes
  • If you click a different item → it opens
  • Only 1 item can be open at once

This is perfect for FAQ pages.

Multi Selection Function

function handleMultiSelection(id) {
  let list = [...multiple];
  const index = list.indexOf(id);

if (index === -1) list.push(id);
  else list.splice(index, 1);
  setMultiple(list);
}
  • You can open multiple items
  • Each click toggles the visibility
  • Works like a checklist

3. The Styling — styles.css

body {
  background-color: #b8925b;
  color: white;
  font-family: sans-serif;
}

.wrapper {
  margin: 50px auto;
  width: 600px;
}
button {
  padding: 10px 20px;
  background-color: #fff;
  border: none;
  color: #000;
  cursor: pointer;
  margin-bottom: 20px;
}
.accordion .item {
  background: #fff;
  margin-bottom: 10px;
  border-radius: 5px;
  color: #000;
}
.title {
  padding: 15px;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  border-bottom: 1px solid #ccc;
}
.content {
  padding: 15px;
  background-color: #f1f1f1;
}

What the CSS does:

  • Gives the page a brown background
  • Creates white accordion items
  • Adds spacing, borders, padding
  • Makes the accordion clean and simple

Final Thoughts

This project is perfect for beginners because it teaches:

  • How to use React state
  • How to show/hide content dynamically
  • How to loop through data using .map()
  • How to build reusable UI components
  • How to manage multiple types of user interaction

Once you understand this component, you’ll be ready to build:

  • Dropdown menus
  • Sidebars
  • FAQ sections
  • Expandable product descriptions
  • Mobile navigation drawers

Building a Simple React Accordion — Explained for Total Beginners was originally published in Javarevisited on Medium, where people are continuing the conversation by highlighting and responding to this story.

This post first appeared on Read More

Related Posts