0
All other Ivs close when I click to open another plus div Home does not close
<nav class="w3-sidebar w3-bar-block w3-red w3-center w3-padding w3-animate-left" style="width:300px;">
<div style="margin-top:170px">
<h1 class="w3-bar-item w3-xxxlarge"><b>Menu</b></h1>
<button class="w3-bar-item w3-button tablink w3-button w3-white w3-large" style="margin-top:20px" onclick="openLink(event, 'Home')">Home</button>
<button class="w3-bar-item w3-button tablink w3-button w3-white w3-large" style="margin-top:20px" onclick="openLink(event, 'Services')">Services</button>
<button class="w3-bar-item w3-button tablink w3-button w3-white w3-large" style="margin-top:20px" onclick="openLink(event, 'Contact')">Contact</button>
<button class="w3-bar-item w3-button tablink w3-button w3-white w3-large" style="margin-top:20px" onclick="openLink(event, 'About')">About</button>
</div>
</nav>
<div class="w3-container w3-padding-32" style="margin-left:350px">
<!-- Div Home-->
<div id="Home" class="w3-container w3-animate-left" style="display:none">
<h1 class="w3-jumbo"><b>Home</b></h1>
<h1 class="w3-xxxlarge w3-text-red"><b>My Website.</b></h1>
<hr style="width:60px;border:5px solid red" class="w3-round">
<div class="w3-row-padding">
<h3 class="w3-xxlarge w3-text-red"><b>Creator Of This Website Biograph</b></h3>
<p class="w3-large" style="width:850px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis commodo varius pulvinar. Aenean vel leo bibendum, pharetra turpis eget, consectetur lectus. Aenean at nibh ante. Ut id dui nec erat euismod efficitur. Aenean interdum est eu accumsan vestibulum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc iaculis mi arcu, ullamcorper dictum felis tempor a. Pellentesque nulla dolor, lobortis eget feugiat eu, posuere sed dolor. Ut efficitur malesuada placerat. Quisque facilisis lacus at congue viverra. Etiam vel venenatis magna. Quisque feugiat aliquet dolor. Donec vitae lacus eget purus placerat blandit. Pellentesque interdum eu nisi nec rhoncus. Curabitur placerat nulla at felis dignissim, in viverra nulla tempor.</p>
<p class="w3-large" style="width:850px">Sed lobortis bibendum lorem vel pharetra. Duis mauris ipsum, consequat ac velit vel, accumsan tempus augue. Nulla gravida ipsum et bibendum volutpat. Vestibulum porta sagittis tortor a sodales. Phasellus sit amet lobortis sapien. Aliquam arcu lorem, varius quis leo eu, viverra laoreet libero. Nam quis nisi interdum nisl ultricies placerat eu id ligula. Duis rutrum porta congue. Praesent dictum, tortor malesuada ultrices elementum, lorem dolor hendrerit massa, non ornare magna velit non nunc. Fusce accumsan tortor placerat rhoncus condimentum. Donec interdum metus sed urna suscipit, a maximus ligula feugiat.</p>
</div>
</div>
<!-- Div Services-->
<div id="Services" class="w3-container w3-animate-left" style="display:none">
<h1 class="w3-jumbo"><b>Services</b></h1>
<hr style="width:60px;border:5px solid red" class="w3-round">
<div style="margin-top:35px">
<h3 class="w3-xxlarge w3-text-red"><b>Web Designer</b></h3>
<p class="w3-large">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis commodo varius pulvinar. Aenean vel leo bibendum, pharetra turpis eget, consectetur lectus. Aenean at nibh ante. Ut id dui nec erat euismod efficitur. Aenean interdum est eu accumsan vestibulum.</p>
<h3 class="w3-xxlarge w3-text-red"><b>Programmer</b></h3>
<p class="w3-large" style="width:750px">Sed lobortis bibendum lorem vel pharetra. Duis mauris ipsum, consequat ac velit vel, accumsan tempus augue. Nulla gravida ipsum et bibendum volutpat. Vestibulum porta sagittis tortor a sodales.</p>
<h3 class="w3-xxlarge w3-text-red"><b>Technic</b></h3>
<p class="w3-large" style="width:750px">Pellentesque posuere quam sit amet consequat gravida. Proin vitae elit ornare, rutrum dolor a, rutrum turpis. Suspendisse congue ipsum molestie sapien suscipit mollis. Maecenas non dui felis. Nullam iaculis sodales quam id aliquet.</p>
<h3 class="w3-xxlarge w3-text-red"><b>Teacher</b></h3>
<p class="w3-large" style="width:750px">Pellentesque posuere quam sit amet consequat gravida. Proin vitae elit ornare, rutrum dolor a, rutrum turpis.</p>
</div>
</div>
<!-- Div Contact-->
<div id="Contact" class="w3-container tab w3-animate-left" style="display:none">
<h1 class="w3-jumbo"><b>Contact</b></h1>
<hr style="width:60px;border:5px solid red" class="w3-round">
<div class="w3-container w3-red">
<h5 class="w3-jumbo">Send an e-mail</h5>
<p>Mauris vitae iaculis lacus, eu sagittis justo. Maecenas aliquam non nulla in faucibus. Cras vitae aliquam nulla. Mauris dignissim est massa, sit amet porta erat lobortis at.</p>
</div>
<input id="nameBox" type="text" name="name" placeholder="Name" required>
<div class="w3-container w3-red" style="padding-top: 19px"></div>
<input id="emailAndress" type="text" name="email" placeholder="Email" required>
<div class="w3-container w3-red" style="padding-top: 19px"></div>
<input id="sendEmailBox" type="text" name="emailBox" placeholder="Write someting" required>
<div class="w3-container w3-red" style="padding-top: 100px">
<input id="myButton" type="submit" value="Send">
</div>
</div>
<!-- Div About-->
<div id="About" class="w3-container tab w3-animate-left" style="display:none">
<h1 class="w3-jumbo"><b>About</b></h1>
<hr style="width:60px;border:5px solid red" class="w3-round">
</div>
</div>
<script>
function openLink(evt, animName) {
var i, x, tablinks;
x = document.getElementsByClassName("tab");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < x.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
}
document.getElementById(animName).style.display = "block";
evt.currentTarget.className += " w3-red";
}
</script>
classListis much better for adding and/or removing classes from an element– Isac