JavaScriptHTML + CSS + JavaScript

123456789

const profilePanel = document.querySelector("#profile-panel");
const detailsPanel = document.querySelector("#details-panel");
const detailsTab = document.querySelector("#details-tab");

function showDetails() {
  // TODO: Hide Profile and show Details.
}

detailsTab.addEventListener("click", showDetails);

const profilePanel = document.querySelector("#profile-panel");
const detailsPanel = document.querySelector("#details-panel");
const detailsTab = document.querySelector("#details-tab");

function showDetails() {
  // TODO: Hide Profile and show Details.
}

detailsTab.addEventListener("click", showDetails);

Draft saved locallyJavaScript · Spaces: 2

Live preview move your pointer inside

Mission 01 10 min

Reward+120 XP

Switch to Another Tab

Tabs are just sections that take turns being visible. Start with two panels: hide Profile and show Details when the Details tab is clicked.

Your mission

Make the Details button hide the profile panel and show the details panel.

Add hidden to profilePanel.
Remove hidden from detailsPanel.

Check tab Run project