Accordion — UI Challenge | FineFrontend

Practice workspaceSign in

React/Accordioneasy

00:00

Read here. Code on desktop. The coding workspace opens on screens 1024px and wider.

User interface challenge

Accordion

easy15 min

Build a reusable accordion that reveals a topic's content when its heading button is clicked. Each group can have at most one panel open, and clicking its open heading closes the group.

The supplied page includes primary and secondary groups, an empty group, and a single-item group. Add local state and click behavior to the starter component. All panels start closed, and the demo content and CSS are already provided.

Requirements

Accept items with unique value, label, and content fields and a unique, HTML-safe groupId. Item values are stable and HTML-safe; items stay fixed after mount in this exercise.
Start with every panel closed in every instance, including the single-item group.
Preserve a root element with data-testid equal to groupId. Render each label in an h3 containing one native button with type="button" and data-value equal to the item value.
Give each content panel data-panel equal to its item value and preserve the supplied content text.
Clicking a closed heading opens its matching panel and closes any other open panel in the same group. Clicking the open heading closes all panels in that group.
Keep all panels mounted. Use the HTML hidden attribute for collapsed panels and remove hidden when a panel is open.
Keep state local to each Accordion instance. Opening, switching, or closing one group must leave other groups unchanged.
An empty items array renders the group root with no item headings, buttons, or panels. A single item follows the same open-and-close behavior.
Preserve the four supplied demo groups and their item props. Do not mutate the supplied items or use an existing accordion component library.
Keep styles in the separate CSS file. The supplied data-open styling hook can reflect whether each heading's panel is open.

Examples

Example 1

Input: Initial render
Output: All six panels are mounted and hidden. The empty group has no headings or panels.

Example 2

Input: Click HTML in the primary group
Output: HTML structures the page. is visible; CSS and JavaScript remain hidden.

Example 3

Input: With HTML open, click CSS in the primary group
Output: CSS styles the page. is visible and the HTML panel is hidden.

Example 4

Input: Click the open CSS heading again
Output: Every primary panel is hidden.

Example 5

Input: Open React in the secondary group
Output: React builds interfaces. is visible; the primary and single-item groups keep their current state.

Each group begins fully collapsed. A heading toggles its own content, and opening another heading closes the previous panel within that group.

What the tests check

Renders the supplied labels as buttons inside headings
Starts every primary panel closed
Starts the secondary and single-item panels closed
Keeps every panel mounted with its supplied content
Clicking HTML opens its panel
Clicking an open header closes every panel in that group
Clicking CSS opens its matching content
Opening CSS closes the previously open HTML panel
Opening JavaScript closes the previously open panel
A previously closed panel can be opened again
Primary interaction preserves the secondary group's open panel
Secondary switching preserves the primary group's open panel
Closing the secondary group leaves the primary group open
Empty items preserve an empty group root
A single item opens and closes independently
Repeated clicks toggle predictably without duplicating panels

References

Accordion pattern

ComponentsStateEventsReusable accordionsToggle stateHidden panelsIndependent instances

Back

Preparing your workspace…