cómo hacer que cuando haga clic en un botón muestre un div y oculte el que está en
ejemplo: si tiene "perfil" y "tablero" y hace clic en "tablero", muestra el div para el tablero y oculta el del perfil
Podría usar .style para ocultar el div, pero sería mejor usar páginas separadas (EX: https://example.com/profile y https://example.com/dashboard ).
(() => { window.onload = () => { const profilediv = document.getElementById(`profile`); const dashboarddiv = document.getElementById(`dashboard`); const profilebutton = document.getElementById(`profilebutton`); const dashboardbutton = document.getElementById(`dashboardbutton`); var page = 0; function updatePage() { profilediv.style.display = `none`; dashboarddiv.style.display = `none`; if (page == 0) { dashboarddiv.style.display = `block`; } else if (page == 1) { profilediv.style.display = `block`; } return; } profilebutton.addEventListener(`click`, e => { page = 1; setTimeout(updatePage); return; }); dashboardbutton.addEventListener(`click`, e => { page = 0; setTimeout(updatePage); return; }); } })(); body { margin: 0; } #profile, #dashboard { width: 100%; height: calc(100% - 20px); top: 20px; left: 0px; padding: 5px; position: fixed; } #topbar { width: 100%; height: 26px; position: fixed; border-bottom: 1px solid #000; } #profilebutton, #dashboardbutton { width: 20%; height: 20px; top: 3px; left: 5px; position: relative; } <div id="topbar"> <button id="dashboardbutton">Dashboard</button> <button id="profilebutton">Profile</button> </div> <div id="dashboard" style="display: block;"> <p>Dashboard</p> </div> <div id="profile" style="display: none;"> <p>Test Account</p> <button>Edit Name</button> </div>