JSFiddle - React, Tailwind, and code Playground

by cigaai

HTML

<div id="menu">
<ul>
<li><a href="#" class="1">ONE</a></li>
<li><a href="#" class="2">TWO</a></li>
<li><a href="#" class="3">THREE</a></li>
</ul>
</div>

<div id="sections">
  <div class="">
    <div class="">
      <div id="content1" class="content1">IMG 1</div>
      <div id="content2" class="content2">IMG 2</div>
      <div id="content3" class="content3">IMG 3</div>
    </div>
  </div>
</div>

CSS

#sections div{
    display:none;
}

JavaScript

$("a").click(function() {
   var id = $(this).attr("class");  //retrieving the id
   $("#sections div").hide(); // hiding all elements
   $("#content" + id).fadeIn(500); // showing the required one only
});