Tell us what’s happening:
Using setAttribute to change hidden to false doesn’t work.
The definition of panel in script.js is what the workshop starts with for this final step, and if I add console.log(panel.innerContent) I see the correct output to confirm the code is working with the correct div element from the HTML.
My usage of setAttribute matches what I have done a few lines above, which does work. I have tried using ”false” as well as false but that doesn’t seem to do anything. I do not understand why this line is not working, or how to fix it.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Planets Facts</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div class="tabs">
<h2 id="tabs-title">Planets</h2>
<div role="tablist" aria-labelledby="tabs-title">
<button role="tab" aria-controls="panel-earth" aria-selected="true" id="tab-earth">🌍 Earth</button>
<button role="tab" aria-controls="panel-saturn" aria-selected="false" id="tab-saturn">🪐 Saturn</button>
<button role="tab" aria-controls="panel-mars" aria-selected="false" id="tab-mars">🔴 Mars</button>
</div>
<div id="panel-earth" role="tabpanel" aria-labelledby="tab-earth">
<p>
Earth is our home planet, known for its abundant water, diverse ecosystems, and life-supporting atmosphere. It's the only planet in the solar system known to harbor life.
</p>
</div>
<div id="panel-saturn" role="tabpanel" aria-labelledby="tab-saturn" hidden>
<p>
Saturn is famous for its beautiful and extensive ring system made of ice and rock particles. It's a gas giant with dozens of moons orbiting it.
</p>
</div>
<div id="panel-mars" role="tabpanel" aria-labelledby="tab-mars" hidden>
<p>
Mars, the red planet, is a rocky world with the tallest volcano and deepest canyon in the solar system. It's a key focus for exploration in the search for past or present life.
</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
/* file: styles.css */
.tabs [role="tablist"] {
display: flex;
gap: 0.5rem;
margin-bottom: 1rem;
}
[role="tab"] {
padding: 0.5rem 1rem;
background: #eee;
border: 1px solid #ccc;
cursor: pointer;
font-weight: bold;
}
[role="tab"][aria-selected="true"] {
background: #fff;
border-bottom: 2px solid dodgerblue;
}
[role="tabpanel"] {
border: 1px solid #ccc;
padding: 1rem;
}
/* file: script.js */
const tabs = document.querySelectorAll('[role="tab"]');
const panels = document.querySelectorAll('[role="tabpanel"]');
// User Editable Region
tabs.forEach(tab => {
tab.addEventListener("click", () => {
tabs.forEach(t => t.setAttribute("aria-selected", "false"));
panels.forEach(p => p.hidden = true);
tab.setAttribute("aria-selected", "true");
const associatedPanel = tab.getAttribute("aria-controls");
const panel = document.getElementById(associatedPanel);
panel.setAttribute("hidden", false). // this line isn't working!
});
});
// User Editable Region
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36
Challenge Information:
Build a Planets Tablist - Step 21
