Javascript проблема добаваления классов css

Возникла проблема с добавлениeм классов css с помашю Javascript . Есть задача не использовать jquery. Проблема заключается втом что при нажати на текст исчезают все блоки а не те которые нужны. Заранее спасибо вот код

<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>