Build a toolbar whose states are all controlled by classes and attributes.
What to build
A row of tabs with one marked as current, and the panels that go with them.
Requirements
- A
navwith the classtoolbar, laid out with flexbox and agap. - At least three buttons with the class
tab. Exactly one also has the classactiveandaria-pressed="true". - The active tab has a different background colour from the others.
- A button with the class
push-right, pushed to the far right of the toolbar with an automatic margin. - At least three elements with the class
panel, of which only one is visible. Use thehiddenattribute for the others.
Constraints
Use only HTML and CSS here. Do not use floats or fixed positions.
Example
<section class="panel" hidden>Second panel</section>
Why it works
Every visual state is described by something a script can flip: a class or an attribute. aria-pressed tells assistive technology what the colour tells a sighted person.
Hints
Hint 1
display: flex and gap lay out the toolbar. margin-left: auto pushes the last button to the far end.
Hint 2
Give the current tab the class active and the attribute aria-pressed="true".
Hint 3
The hidden attribute removes a panel from view.
Solution
Show one correct solution (try it yourself first)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Toolbar</title>
<style>
.toolbar { display: flex; gap: 8px; }
.tab { background: white; }
.tab.active { background: navy; color: white; }
.push-right { margin-left: auto; }
</style>
</head>
<body>
<nav class="toolbar">
<button class="tab active" aria-pressed="true">One</button>
<button class="tab" aria-pressed="false">Two</button>
<button class="tab" aria-pressed="false">Three</button>
<button class="push-right">Help</button>
</nav>
<section class="panel">First panel</section>
<section class="panel" hidden>Second panel</section>
<section class="panel" hidden>Third panel</section>
</body>
</html>