How to make it so when a button is clicked a div shows and when a different button is clicked it hides that div and displays a different one

Question

how to make it so when you click a button it shows a div and hides the one ur on

example: if you have "profile" & "dashboard" and you click "dashboard" it shows the div for dashboard and hides the one for profile

Answer 1

You could use .style to hide the div, but it would be better to use seperate pages (EX: https://example.com/profile and 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>