LearnHub
Sign inCreate account

Project Challenge

FAQ Accordion

DOM AppsIntermediate

Build a one-open-at-a-time FAQ accordion that returns stable accessibility state and preview markup.

Back to libraryOpen linked lesson

This Challenge

Category
DOM Apps
Linked topic
Event Handling
Estimated time
35 minutes
State togglingAccessible markupView modelling

DOM Apps

Challenge brief

Support needs a FAQ accordion where one answer stays open at a time and the UI exposes clear expanded state.

Target outcome

Return a snapshot that tells the renderer which panel is open and what markup should be mounted for the list.

Deliverables
Track the currently expanded FAQ item.
Render buttons with the correct aria-expanded value.
Show the selected answer and collapse the others.
Return a view snapshot with the active id and expanded count.
Acceptance checklist
Only one item is expanded at a time.
The selected answer text appears in the markup preview.
Each button reflects expanded state correctly.
The snapshot object can drive a renderer without extra transforms.

Project Workspace

Build the challenge in one focused editor

Use the starter code, run the checks, and compare your structure with the solution notes only after you have attempted the project yourself.

DOM Apps35 minIntermediate
Project editor

Build the challenge in JavaScript or TypeScript, then run the current workspace checks against the compiled output.

21 lines
JavaScript mode runs directly in the current project runner.
Workspace checks
Promise panel
Check

Opening the promises item should expose its answer and expanded state.

Input: ["promises"]
Expected: {"activeId":"promises","expandedCount":1,"visibleAnswer":"Promise callbacks run in the microtask queue before the next task.","markup":"<section data-id=\"timers\"><button aria-expanded=\"false\">How do timers enter the event loop?</button><p hidden>They wait in the task queue until the call stack is clear.</p></section><section data-id=\"promises\"><button aria-expanded=\"true\">Why do promises feel faster?</button><p>Promise callbacks run in the microtask queue before the next task.</p></section><section data-id=\"fetch\"><button aria-expanded=\"false\">Where should fetch errors be handled?</button><p hidden>Handle network and response failures close to the async boundary.</p></section>"}
Run output
Run the project to inspect automatic checks and console output.
Project review

Inspect the project solution like a senior reviewer would, with correctness, structure, and maintainability feedback.

Run the review after or before the code runner. If test results are available, the review will factor them into the feedback as well.