JSFiddle - React, Tailwind, and code Playground

by Mohamed Amer

HTML

<div class="title">
    <a class="show_hide">Show slidingDiv</a>
    <a class="show_hide1">Show slidingDiv1</a>
    <a class="show_hide2">Show slidingDiv2</a>
</div>

<div class="slidingDiv">slidingDiv</div>
<div class="slidingDiv1">slidingDiv1</div>
<div class="slidingDiv1">slidingDiv2</div>

CSS

a{
    display : block;
}
div[class^='slidingDiv']{
    color : #fff;
    background: red;
    font-size : 20px;
    height : 400px;
}

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();
    });
});