I have created a webpage with two distinct sections, each occupying the height of the viewport. The first section contains a 'work' button in the center. Upon clicking this button, it disappears and is replaced by some links. The same functionality applies to the second section as well.
Now, I am attempting to implement a reset function that removes the links and adds back the buttons. Initially, I tried to make one universal reset button for all sections, but since that didn't work as expected, I am now focusing on creating individual reset buttons for each section.
The issue I am facing is that the second section's reset button appears in the same location as the first section's button. Ideally, they should be positioned at the bottom right corner of their respective sections.
function openSites(categoryType) {
if (categoryType == "work") {
var sites = document.getElementById("workSites");
var button = document.getElementById("workButton");
} else if (categoryType == "other") {
var sites = document.getElementById("otherSites");
var button = document.getElementById("otherButton");
}
sites.classList.add("show");
sites.classList.remove("hide");
button.classList.add("hide");
}
function reset(categoryType) {
if (categoryType == "work") {
var sites = document.getElementById("workSites");
var button = document.getElementById("workButton");
} else if (categoryType == "other") {
var sites = document.getElementById("otherSites");
var button = document.getElementById("otherButton";
}
sites.classList.remove("show");
sites.classList.add("hide");
button.classList.remove("hide");
}
function betterReset() {
for (category in document.getElementsByClassName("category-container")) {
document.write(category);
}
}* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page {
display: inline-block;
overflow: hidden;
width: 100%;
height: 100vh;
}
#page-1 {
display: block;
background-color: #3faae4;
}
#page-2 {
display: block;
background-color: #ffffff;
}
.pointer {
cursor: pointer;
}
#work {
height: 100%;
width: 100%;
}
#other {
height: 100%;
width: 100%;
}
#workSites {
height: 100%;
width: 100%;
}
#otherSites {
height: 100%;
width: 100%;
}
.sites {
list-style-type: none;
height: 100%;
}
.site {
padding: 50px 0px;
flex-grow: 1;
text-align: center;
}
.center {
display: flex;
align-items: center;
justify-content: center;
}
.category-container {
height: 100%;
}
.category-button {
border: solid 0.5px;
padding: 60px;
}
.buttonClose {
position: absolute;
border: solid 0.5px;
border-radius: 5px;
right: 3px;
bottom: 0px;
width: 70px;
height: 35px;
}
.show {
display: block;
}
.hide {
display: none;
}<!DOCTYPE html>
<html>
<head>
<title>Nick's site</title>
<link rel="stylesheet" type="text/css" href="./styles3.css">
<meta name="viewport" content="width= device-width, inital-scale=1">
</head>
<body>
<div id="page-1" class="page">
<div id="work">
<div id="workButton" class="category-container center">
<a class="category-button pointer" onclick="openSites('work')">Work</a>
</div>
<div id="workSites" class="hide">
<ul class="sites center">
<li class="site"><a class="pointer" href="#">Printfactory</a></li>
<li class="site"><a class="pointer" href="#">Henry's Site</a></li>
</ul>
<button onclick="reset('work')" class="buttonClose pointer" style="z-index: 2;">
Reset
</button>
</div>
</div>
</div>
<div id="page-2" class="page">
<div id="other">
<div id="otherButton" class="category-container center">
<a class="category-button pointer" onclick="openSites('other')">Other</a>
</div>
<div id="otherSites" class="hide">
<ul class="sites center">
<li class="site"><a class="pointer" href="#">#</a></li>
<li class="site"><a class="pointer" href="#">#</a></li>
<li class="site"><a class="pointer" href="#">#</a></li>
</ul>
<button onclick="reset('other')" class="buttonClose pointer" style="z-index: 2;">
Reset2
</button>
</div>
</div>
</div>
</body>
</html>