JavaScript: Interaction
Show and hide a tip
Your goal: Add an accessible interaction to your hobby page.
Learn
The hidden property controls visibility. Keep aria-expanded on the button in sync so assistive technology can report whether the content is open.
View starter code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My hobby page</title>
<style></style>
</head>
<body>
<h1>My hobby</h1>
<button id="toggle" aria-expanded="false" aria-controls="tip">Show tip</button>
<p id="tip" hidden>Practise regularly.</p>
<script>
const button = document.getElementById("toggle");
const tip = document.getElementById("tip");
button.addEventListener("click", function () {
tip.hidden = !tip.hidden;
button.setAttribute("aria-expanded", String(!tip.hidden));
});
</script>
</body>
</html>Your challenge
Change the tip and make the button label switch between Show tip and Hide tip. Then add this interaction to your hobby page.
Keep developing your hobby page: Download HTML before leaving the sandbox, then choose Open HTML file when returning to your project. Load saved draft restores only this lesson’s draft in this browser.
Practise in the sandboxShow a hint
After changing tip.hidden, use a condition to set the button’s textContent.
Show a sample answer
Try the challenge first. This is one possible answer or a snippet to adapt.
button.textContent = tip.hidden ? "Show tip" : "Hide tip";Check your work
Repeated clicks show and hide the tip; the label describes the next action.
Completion is your own check, not an automatic grade.