JSFiddle - React, Tailwind, and code Playground

by Mohamed Amer

HTML

<div class="title">
    <a class="show_hide">Show</a>
    <a class="show_hide1">Show 1</a>
    <a class="show_hide2">Show 2</a>
</div>

<div class="slidingDiv">hi</div>
<div class="slidingDiv1">hi2</div>
<div class="slidingDiv1">hi3</div>

JavaScript

$(document).ready(function(){
   // hide all divs class starts with slidingDiv
   $("div[class^='slidingDiv']").hide();
   // show all anchor class starts with show_hide
   $("a[class^='show_hide']").show();


  // anchor click event
    $(".title > a[class^='show_hide']").on('click', function(e){
      e.preventDefault(); // prevent to reload
      // slide up all divs starts with slidingDiv but not the slidingDiv with index with <a> .. that mean if you click a with index() 0  it will hide all slidingDiv divs and show slidingDiv with index 0  and 1 for 1 and son on
      $("div[class^='slidingDiv']").not($("div[class^='slidingDiv']").eq($(this).index())).slideUp();
      $("div[class^='slidingDiv']").eq($(this).index()).slideToggle();
    });
});