JSFiddle - React, Tailwind, and code Playground

by Salmin Skenderovic

HTML

<div id="nav">
  <a href="javascript:void(0)" data-id="home">Home</a>
  <a href="javascript:void(0)" data-id="about">About</a>
  <a href="javascript:void(0)" data-id="contact">Contact</a>
</div>



<div id="home" class="active">
  <h4>Home</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis est officiis sunt, eaque similique expedita amet! Tenetur quam sed, modi porro eius hic reiciendis perspiciatis, maiores unde placeat vitae repellendus.</p>
</div>

<div id="about" class="hide">
<h4>About</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores voluptatum iure blanditiis modi reiciendis cupiditate omnis exercitationem ad, dolore, eum tempore unde alias voluptas asperiores eos aspernatur. In, harum, voluptates!</p>
</div>

<div id="contact" class="hide">
  <h4>Contact</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis et illum unde nulla excepturi! Ab omnis hic harum, quam, ut dicta optio sit aliquam expedita ducimus. Mollitia, similique doloribus perferendis.</p>
</div>

CSS

.hide {
  display: none;
}

JavaScript

var navigations = document.querySelectorAll("#nav a");

navigations.forEach(function(clickedNav) {
	//clickedNav is the entire element that we click on
	clickedNav.addEventListener("click", function() { handleNav(clickedNav); });
});


function handleNav(nav) {
	// Get the id from the data-id
	var id = nav.dataset.id;
  
  // Get the selected area to show
	var selected = document.querySelector("#" + id);

	// Remove old active
  document.querySelector(".active").classList.add("hide");
  document.querySelector(".active").classList.remove("active");
  
  // Show our new page
	selected.classList.remove("hide");
  selected.classList.add("active");
}