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
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>