JSFiddle - React, Tailwind, and code Playground

by Shishir Max

HTML

<div class="firstpart">
  <a href="#">show div1</a>
  <a href="#">show div2</a>
  <a href="#">show div3</a>
  <a href="#">show div4</a>
</div>
<div id="parent1">
  <div id="div1">hello1</div>
  <div id="div2">hello2</div>
  <div id="div3">hello3</div>
  <div id="div4">hello4</div>
</div>

<br>
<br>
<br>

<div class="secondpart">
  <a href="#">show div5</a>
  <a href="#">show div6</a>
  <a href="#">show div7</a>
  <a href="#">show div8</a>
</div>
<div id="parent2">
  <div id="div5">hello5</div>
  <div id="div6">hello6</div>
  <div id="div7">hello7</div>
  <div id="div8">hello8</div>
</div>

JavaScript

$(document).ready(function() {

  $('#div1, #div2, #div3, #div4').toggle();

  $(".firstpart a").each(function(i) {
    $(this).click(function() {
      $("#parent1").find("div:eq('" + i + "')").toggle().siblings();
    });
  });
});
$(document).ready(function() {

  $('#div5, #div6, #div7, #div8').toggle();

  $(".secondpart a").each(function(i) {
    $(this).click(function() {
      $("#parent2").find("div:eq('" + i + "')").toggle().siblings();
    });
  });
});