There was a problem with adding css classes with a Javascript . There is a task not to use jquery . The problem is that when you click on the text all the blocks disappear and not those that are needed. Thanks in advance here is the code
<div class="top-navigation" id="div"> <p>Content-One</p> <p>Content-Two</p> <p>Content-Three</p> </div> <div class="content-wrapper" id="wrapper"> <div class="content visible"> <h1>Content-One</h1> </div> <div class="content"> <h1>Content-Two</h1> </div> <div class="content"> <h1>Content-Three</h1> </div> </div> <script type="text/javascript"> var content=document.getElementById('wrapper').getElementsByClassName('content'); var btn=document.getElementById('div').getElementsByTagName('p'); for(var i=0; i < btn.length; i++){ btn[i].addEventListener("click" , openfunction); } function openfunction(){ for(var i=0; i < content.length; i++){ content[i].classList.remove('visible'); } this.classList.add('visible'); } </script> var content = document.getElementById('wrapper').getElementsByClassName('content'); var btn = document.getElementById('div').getElementsByTagName('p'); for (var i = 0; i < btn.length; i++) { btn[i].addEventListener("click", openfunction); } function openfunction() { for (var i = 0; i < content.length; i++) { content[i].classList.remove('visible'); } this.classList.add('visible'); } .content { display:none; } .visible { display:block; } <div class="top-navigation" id="div"> <p>Content-One</p> <p>Content-Two</p> <p>Content-Three</p> </div> <div class="content-wrapper" id="wrapper"> <div class="content visible"> <h1>Content-One</h1> </div> <div class="content"> <h1>Content-Two</h1> </div> <div class="content"> <h1>Content-Three</h1> </div> </div> 
