CODEWITHSUNDEEP
jquery
alyus
alyus

Reputation: 1007

Showing/Hiding content similar to pagination?

I have a total of 4 tables, 3 hidden, only 1 visible. I also have 4 links at the bottom which controls which content to show. For instance, if you click on box-1 you get table-1, box-2 you get table-2 and so forth. Using a switch statement I've got the content fading in and out, but when you select them in different order, they get all jacked. I want to be able to click link-c, get table-3 and so forth (kinda like 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;
    }
});

Upvotes: 1

Views: 649

Answers (2)

Dhiraj
Dhiraj

Reputation: 33628

On the anchor tags store the reference to tables in either the href attribute or data-* attribute.

<a class="link link-a active" href="" data-target="table-1">Table-1</a>
<a class="link link-b" href="" data-target="table-2">Table-2</a>

For each table have a class table like this 

<table class="table table-1"></table>
<table class="table table-2"></table>

The below script should do it

$('.link').on('click', function(e){
  e.preventDefault();
  var target = $(this).data('target');
  $('.table').fadeOut();
  $('.' + target).fadeIn();

  $('.link').removeClass('active');
  $(this).addClass('active');
});


$('.link').on('click', function(e) {
  e.preventDefault();
  var target = $(this).data('target');
  $('.table').fadeOut();
  $('.' + target).fadeIn();

  $('.link').removeClass('active');
  $(this).addClass('active');
});
.table-2,
.table-3,
.table-4 {
  display: none;
}
.active {
  color: red;
}
<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <div class="wrap">
    <table class="table table-1">
      <thead>
        <tr>
          <th>Table 1</th>
        </tr>
      </thead>
    </table>

    <table class="table table-2">
      <thead>
        <tr>
          <th>Table 2</th>
        </tr>
      </thead>
    </table>

    <table class="table table-3">
      <thead>
        <tr>
          <th>Table 3</th>
        </tr>
      </thead>
    </table>

    <table class="table table-4">
      <thead>
        <tr>
          <th>Table 4</th>
        </tr>
      </thead>
    </table>

    <div class="links">
      <a class="link link-a active" href="" data-target="table-1">Table-1</a>
      <a class="link link-b" href="" data-target="table-2">Table-2</a>
      <a class="link link-c" href="" data-target="table-3">Table-3</a>
      <a class="link link-d" href="" data-target="table-4">Table-4</a>
    </div>
  </div>
</body>

</html>

Upvotes: 0

guest271314
guest271314

Reputation: 1

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>

Upvotes: 1

Related Questions