Accordion ReactJs code

open only one Accordion

const data = [
  {
    id: 1,
    title: "What is React?",
    content: "React is a JavaScript library for building UIs."
  },
  {
    id: 2,
    title: "What is JSX?",
    content: "JSX is a syntax extension for JavaScript."
  },
  {
    id: 3,
    title: "What are Hooks?",
    content: "Hooks let you use state and lifecycle features."
  }
];

import React, { useState } from "react";

const Accordion = ({ items }) => {
  const [activeId, setActiveId] = useState(null);

  const handleToggle = (id) => {
    setActiveId(activeId === id ? null : id);
  };

  return (
    <div style={{ width: "400px", margin: "20px auto" }}>
      {items.map((item) => (
        <div key={item.id} style={{ border: "1px solid #ccc", marginBottom: "8px" }}>
          
          <div
            onClick={() => handleToggle(item.id)}
            style={{
              padding: "10px",
              cursor: "pointer",
              background: "#f5f5f5",
              fontWeight: "bold"
            }}
          >
            {item.title}
          </div>

          {activeId === item.id && (
            <div style={{ padding: "10px", background: "#fff" }}>
              {item.content}
            </div>
          )}
        </div>
      ))}
    </div>
  );
};

export default function App() {
  return <Accordion items={data} />;
}

open All Accordion

const [openIds, setOpenIds] = useState([]);
const handleToggle = (id) => {
  setOpenIds((prev) =>
    prev.includes(id)
      ? prev.filter((item) => item !== id)
      : [...prev, id]
  );
};
{openIds.includes(item.id) && <div>{item.content}</div>}

Machine coding (Accordion)

Get Roshanurkande’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

components/
└── Accordion/
├── Accordion.jsx
├── AccordionItem.jsx
└── accordion.css

Accordion.jsx

import React, { useState, useCallback } from "react";
import AccordionItem from "./AccordionItem";

const Accordion = ({
  items,
  allowMultiple = false,
  defaultOpenIds = []
}) => {
  const [openIds, setOpenIds] = useState(defaultOpenIds);

  const toggleItem = useCallback(
    (id) => {
      setOpenIds((prev) => {
        if (allowMultiple) {
          return prev.includes(id)
            ? prev.filter((item) => item !== id)
            : [...prev, id];
        }
        return prev[0] === id ? [] : [id];
      });
    },
    [allowMultiple]
  );

  return (
    <div className="accordion" role="presentation">
      {items.map((item) => (
        <AccordionItem
          key={item.id}
          item={item}
          isOpen={openIds.includes(item.id)}
          onToggle={() => toggleItem(item.id)}
        />
      ))}
    </div>
  );
};

export default Accordion;

AccordionItem.jsx

import React, { useRef, useEffect } from "react";

const AccordionItem = ({ item, isOpen, onToggle }) => {
  const contentRef = useRef(null);

  useEffect(() => {
    if (contentRef.current) {
      contentRef.current.style.maxHeight = isOpen
        ? `${contentRef.current.scrollHeight}px`
        : "0px";
    }
  }, [isOpen]);

  return (
    <div className="accordion-item">
      <button
        className="accordion-header"
        onClick={onToggle}
        aria-expanded={isOpen}
        aria-controls={`accordion-content-${item.id}`}
      >
        <span>{item.title}</span>
        <span className={`arrow ${isOpen ? "open" : ""}`}>⌄</span>
      </button>

      <div
        id={`accordion-content-${item.id}`}
        ref={contentRef}
        className="accordion-content"
        role="region"
      >
        <div className="accordion-body">{item.content}</div>
      </div>
    </div>
  );
};

export default AccordionItem;

accordion.css

.accordion {
  width: 100%;
  max-width: 500px;
  margin: auto;
}

.accordion-item {
  border: 1px solid #ddd;
  margin-bottom: 8px;
  border-radius: 6px;
  overflow: hidden;
}

.accordion-header {
  width: 100%;
  padding: 12px;
  background: #f7f7f7;
  border: none;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  font-size: 16px;
}

.accordion-header:focus {
  outline: 2px solid #4c9ffe;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-body {
  padding: 12px;
  background: #fff;
}

.arrow {
  transition: transform 0.3s ease;
}

.arrow.open {
  transform: rotate(180deg);
}

Accordion/

const data = [
  { id: 1, title: "React", content: "A JS library for UI" },
  { id: 2, title: "Hooks", content: "State & lifecycle in functions" },
  { id: 3, title: "Virtual DOM", content: "Efficient DOM updates" }
];

export default function App() {
  return (
    <Accordion
      items={data}
      allowMultiple={false}
      defaultOpenIds={[1]}
    />
  );
}

Final 15 min Accordion Interview

import React, { useState } from "react";

const Accordion = ({ items }) => {
  const [activeId, setActiveId] = useState(null);

  const handleToggle = (id) => {
    setActiveId((prev) => (prev === id ? null : id));
  };

  if (!items?.length) return null;

  return (
    <div className="accordion">
      {items.map((item) => {
        const isOpen = activeId === item.id;

        return (
          <div key={item.id} className="accordion-item">
            <button
              className="accordion-header"
              onClick={() => handleToggle(item.id)}
              aria-expanded={isOpen}
              aria-controls={`content-${item.id}`}
            >
              {item.title}
            </button>

            {isOpen && (
              <div
                id={`content-${item.id}`}
                className="accordion-content"
                role="region"
              >
                {item.content}
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
};

export default Accordion;

const data = [
  { id: 1, title: "React", content: "UI library by Facebook" },
  { id: 2, title: "Hooks", content: "State & lifecycle in functions" },
  { id: 3, title: "JSX", content: "Syntax extension for JS" }
];

export default function App() {
  return <Accordion items={data} />;
}

.accordion-item {
  border: 1px solid #ddd;
  margin-bottom: 8px;
}

.accordion-header {
  width: 100%;
  padding: 10px;
  background: #f5f5f5;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: 16px;
}

.accordion-content {
  padding: 10px;
  background: #fff;
}

Multiple open items

const [openIds, setOpenIds] = useState([]);

const handleToggle = (id) => {
  setOpenIds((prev) =>
    prev.includes(id)
      ? prev.filter((x) => x !== id)
      : [...prev, id]
  );
};
const isOpen = openIds.includes(item.id);