I made this code:
document.addEventListener("DomContentLoaded", function(){
var home = document.getElementById("home");
var set = document.getElementById("settings");
var binds = document.getElementById("binds");
home.onclick = function(){
document.getElementById("nickname").visibility = "visible";
};
set.onclick = function(){
document.getElementById("settings2").visibility = "visible";
document.getElementById("nickname").visibility = "hidden";
};
binds.onclick = function(){
document.getElementById("binds2").visibility = "visible";
};
});<!DOCTYPE html>
<html>
<head>
<style>
#main {
position: absolute;
top: 12%;
left: 25%;
width: 350px;
height: 410px;
background-color: #CBCBCB;
}
ul {
list-style-type: none;
background-color: #A09C9C;
overflow: hidden;
margin: 0px;
padding: 0;
}
li {
float: left;
}
li a{
display: block;
padding: 20px 15px;
color: white;
}
li a:hover:not(active) {
background-color: black;
}
li a.active {
background-color: black;
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="main">
<ul>
<li id="home" ><a class="active">Home</a></li>
<li id="settings"><a>Settings</a></li>
<li id="binds"><a>Binds</a></li>
</ul>
<div id="nickname">
<input style="margin-left: 5%; margin-top: 4%;" type="text" placeholder="{ogarpw}Nickname"/>
<input style="border: 2px solid white; " type="button" value="Jugar"/>
</div>
<div id="settings2" style="visibility: hidden;">
<h1 style="text-align: center;">Settings!</h1>
<p> Cualquier configuracion disponible..</p>
</div>
<div id="binds2" style="visibility: hidden;">
<h1 style="text-align: center;">Binds!</h1>
<p> Cualquier bind disponible..</p>
</div>
</div>
</body>
</html> 1) It is assumed that when you click click on 'settings', it hides the contents of div nickname and shows the contents of div settings2 , but it is not, because it fails me that aspect?