Sign in
Skip to solution
easyMachine Coding

Build an Accordion component

163 views
01

Understand the problem

Build an accordion that expands and collapses sections.

ReactUIAccessibility
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

Solve in

Building an Accordion in React

Mental model: An accordion is a list of header/panel pairs where opening a panel toggles its visibility. The only real state is which ids are open — model it as a Set. A single allowMultiple flag decides whether opening one closes the others.

Step 1 — Track open ids in

Solution ready — 2 min read

Classified // press E to declassify

04

React solution

Complete solutionRun Playground
import React from 'react';
import Accordion from './src/Accordion';

const items = [
  { id: 'a', title: 'What is an accordion?', content: 'A vertically stacked set of headers that each reveal a section of content.' },
  { id: 'b', title: 'When should I use one?', content: 'To condense long content into scannable, collapsible sections.' },
  { id: 'c', title: 'Single or multiple open?', content: 'Toggle the allowMultiple prop to permit more than one open panel.' },
];

export default function App() {
  return (
    <div style={{ fontFamily: 'sans-serif', padding: 20 }}>
      <h1>Accordion Demo</h1>
      <Accordion items={items} allowMultiple={false} />
    </div>
  );
}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 19 of 87 decoded in the Frontend Machine Coding track. One more won't hurt.

Back to track