JSFiddle - React, Tailwind, and code Playground

by Léo Durand

HTML

<a href="#" onclick="toggle('about');">About Us</a>
<a href="#" onclick="toggle('contact');">Contact</a>
<a href="#" onclick="toggle('products');">Products</a>
  
<div class="article" class="about" style="display:none;">ABOUT ARTICLE...</div>
<div class="article" class="contact" style="display:none;">CONTACT ARTICLE...</div>
<div class="article" class="products" style="display:none;">PRODUCTS ARTICLE...</div>

JavaScript

function toggle(target){
    
  var artz = document.getElementsByClassName('article');
  var targ = document.getElementsByClassName(target);  
  var isVis = targ.style.display=='block';
    
  // hide all
  for(var i=0;i<artz.length;i++){
     artz[i].style.display = 'none';

  }
  // toggle current
   for(var i=0;i<targ.length;i++){

     targ[i].style.display = isVis?'none':'block';
   } 
  return false;
}