JSFiddle - React, Tailwind, and code Playground

by kayenglajom

HTML

<h3 class = "trigger"><a href="#slider1_container"> slider 1</a></h3>
    <h3 class = "trigger"><a href="#slider2_container"> slider 2</a></h3>
    <h3 class = "trigger"><a href="#slider3_container"> slider 3</a></h3>
    <h3 class = "trigger"><a href="#slider4_container"> slider 4</a></h3>




<div id="slider1_container" style=" width: 50px; height: 50px; overflow: hidden;  display: none;">1
</div>
<div id="slider2_container" style=" width: 50px; height: 50px; overflow: hidden;  display: none;">2
</div>
<div id="slider3_container" style=" width: 50px; height: 50px; overflow: hidden; display: none; ">3
</div>
<div id="slider4_container" style="width: 50px; height: 50px; overflow: hidden; display: none;">4
</div>

JavaScript

$(document).ready(function(){

       $("a").each(function(){
           var $this = $(this);
           $(this).click(function(){
            //alert("dfgfdg");
            $($this.attr('href')).show();
            $('div').not($this.attr('href')).hide();
          });
       });

});