← All challenges
Challenge
Tabbed Interface
Medium- javascript
- dom
- accessibility
Build a set of tabs: a row of buttons with one content panel underneath that follows the selected button. Only one panel shows at a time.
Notes:
- The starter has two empty containers,
.tabsfor the buttons and.panelsfor the panels. Fill both and write the switching script yourself.
Check your work against
- At least 3 tabs, each with its own distinct content panel
- Clicking a tab shows its panel and hides the others
- The active tab button is visually distinguished from inactive ones
- Starts with one tab active by default (not a blank state)
No automatic grading
Check your work against the list above, then compare it with the solution preview.
Tab indents. Press Esc, then Tab to leave the editor.
Live preview
Starter loaded. The preview updates as you type.