I'm attempting to create a feature where, upon clicking a button, a hidden div will be revealed. However, my current implementation doesn't seem to be working.
function reload(){
window.reload();
}
function vis(x,z,a){
var xpar = document.getElementById(x);
var zpar = document.getElementById(z);
var apar = document.getElementById(a);
xpar.style.display = "block";
zpar.style.display = "block";
apar.style.display = "block";
}
#ap{
text-decoration: none;
color: darkred;
font-size: 20px;
font-family: monospace;
font-weight: bold;
text-align: center;
display: block;
cursor: default;
}
#ap:active{
color: red;
}
#tgt, #tgt li{
display: none;
color: white;
background-color: blue;
text-decoration: overline;
text-decoration-color: black;
width: 100px;
height: 70px;
}
#ap button{
background: inherit;
outline: none;
color: white;
border: none;
cursor: pointer;
}
#ap button:active{
outline: none;
border: none;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en-US" style="background-color: black;">
<body>
<a id="ap" href="#" onclick="reload()"><button onclick="vis('login','sign','shop')">Click To Open!</button></a>
<div id="tgt">
<ul style="list-style-type: none; overflow: hidden; display: inline;">
<li id="login" style="overflow: hidden; display: inline;">Login</li>
<li id="sign" style="overflow: hidden; display: inline;">Sign In</li>
<li id="shop" style="overflow: hidden; display: inline;">Shop</li>
</ul>
</div>
</body>
</html>
I'm working in Brackets, so if you notice any errors like syntax issues, please leave your feedback in the comments.
I'm experimenting with JS, CSS, and HTML with limited knowledge, so don't expect me to grasp complex concepts like arrays.
Edit: After trying various solutions, I finally found one that works. However, when I apply it to my code, it still doesn't function correctly.
<!DOCTYPE html>
<html lang="en-US" style="background-color: black;">
<head>
<title>Hidden List</title>
<style>
ul li{
overflow: hidden;
}
.liul{
display: none;
color: white;
font-size: 20px;
font-family: sans-serif;
font-weight: bolder;
text-align: left;
margin-bottom: 10px;
}
.liul ul li{
background: red;
width: 60px;
}
#shop{
position: absolute;
top: 28px;
left: 15px;
}
#home{
position: absolute;
top: 50px;
left: 15px;
}
#about{
position: absolute;
top: 70px;
left: 15px;
}
</style>
</head>
<body>
<button class="btn">Click Me!</button>
<div class="liul">
<ul style="list-style-type: none; overflow: hidden;">
<li id="shop">Shop</li>
<li id="home">Home</li>
<li id="about">About</li>
</ul>
</div>
<script>
function reload(){
window.reload();
}
let trg = document.querySelector("div");
let btn = document.querySelector("button");
trg.style.display = "none";
btn.addEventListener('click', ()=>{
if(trg.style.display === "none"){
trg.style.display = "block";
} else {
trg.style.display = "none";
}
});
}
</script>
</body>
</html>
Edit 2: I managed to fix the errors, they were just some minor syntax issues. Thank you! :)