jquery - Showing/Hiding content similar to pagination? -

i have total of 4 tables, 3 hidden, 1 visible. have 4 links @ bottom controls content show. instance, if click on box-1 table-1, box-2 table-2 , forth. using switch statement i've got content fading in , out, when select them in different order, jacked. want able click link-c, table-3 , forth (kinda how pagination works).

html:

<div class="wrap">     <table class="table-1">         <thead>             <tr>                 <th>table 1</th>             </tr>         </thead>     </table>      <table class="table-2">         <thead>             <tr>                 <th>table 2</th>             </tr>         </thead>     </table>      <table class="table-3">         <thead>             <tr>                 <th>table 3</th>             </tr>         </thead>     </table>      <table class="table-4">         <thead>             <tr>                 <th>table 4</th>             </tr>         </thead>     </table>      <div class="links">          <a class="link link-a active" href="">table-1</a>          <a class="link link-b" href="">table-2</a>          <a class="link link-c" href="">table-3</a>          <a class="link link-d" href="">table-4</a>     </div> </div> 

css:

.table-2, .table-3, .table-4 {     display: none; } 

js:

$('.link').on('click', function(e) {     switch (true) {         case $(this).hasclass('link-a'):             $('.table-1').fadeout(250, function() {                 $('.table-2').fadein(150).show();             });             break;         case $(this).hasclass('link-b'):             $('.table-1').fadeout(250, function() {                 $('.table-2').fadein(150).show();             });             break;         case $(this).hasclass('link-c'):             $('.table-1').fadeout(250, function() {                 $('.table-3').fadein(150).show();             });             break;         case $(this).hasclass('link-d'):             $('.table-1').fadeout(250, function() {                 $('.table-4').fadein(150).show();             });             break;     } }); 

try utilizing .eq() , .index() , .siblings()

$(".links a").on("click", function(e) {    e.preventdefault();    $("table").eq($(this).index()).fadein(150).siblings("table").fadeout(250);    $(this).addclass("active").siblings("a").removeclass("active");  })

.table-2,  .table-3,  .table-4 {      display: none;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div class="wrap">      <table class="table-1">          <thead>              <tr>                  <th>table 1</th>              </tr>          </thead>      </table>        <table class="table-2">          <thead>              <tr>                  <th>table 2</th>              </tr>          </thead>      </table>        <table class="table-3">          <thead>              <tr>                  <th>table 3</th>              </tr>          </thead>      </table>        <table class="table-4">          <thead>              <tr>                  <th>table 4</th>              </tr>          </thead>      </table>        <div class="links">           <a class="link link-a active" href="#">table-1</a>           <a class="link link-b" href="#">table-2</a>           <a class="link link-c" href="#">table-3</a>           <a class="link link-d" href="#">table-4</a>      </div>  </div>