0

I am struggling to implement a tab system with jquery (Not paginate system), it will be working as like as carousole

this is the snippet:

<div class="tab">
    <p>Tab 1</p>
</div>

<div class="tab">
    <p>Tab 2</p>
</div>

<div class="tab">
    <p>Tab 3</p>
</div>

<div class="tab">
    <p>Tab 4</p>
</div>

there above can be as much data as possible that comes from backend, there not only 4 tabs.

So I am trying to achieve, when page load, there will be the first two data/tab will be visible. when users click on the 2nd tab, there should 2nd tab and 3rd tab visible, so that user can click on 3rd tab to navigate 4th tab. like if if user click on 4th tab, there should be visible 4th and 5th tab. likewise, every next tab should act same.

For example, when page loaded,

the web will show lie this below

tab 1 | tab 2

so if i click on tab 2

it should show like this:

tab 2 tab 3

and if then click on tab 3

it should show like this:

tab 3 tab 4

so if i click on tab 4

it should show

tab 4 tab 5

likewise, every next tab should behave sam way.

Can anyone please help me to get it done with jquery?

I just tried a lot but I failed in every attempt

Improve this question
9
  • Are you trying to achieve a pagination system? Commented Jun 30, 2020 at 17:10
  • No, I am trying to pagintae system Commented Jun 30, 2020 at 17:13
  • It will looks like careosole Commented Jun 30, 2020 at 17:13
  • yes, but if you imagine a carousel it's like having a pagination system where if you change tab the new data will be fetched from server and displayed Commented Jun 30, 2020 at 17:16
  • 1
    Well if this is the case use a simple pagination library since you already have all data. Try with this. Nevertheless @ahmed-tag-amer is right, loading all data it's a risk. Commented Jun 30, 2020 at 17:28

1 Answer 1

Reset to default
1

You can try this out: it will show next tab on every click. If you want reverse traversing also please let me know.

$(document).ready(function () {
            const tabs = $("#tabs");
            // To show first two tabs
            $(tabs).children(".tab").slice(0, 2).show();
    
            $(".tab").click(function () {
              if ($(this).is(":first-child") || $(this).is(":last-child")) {
                return false;
              }
    
              // If you want to swtich tabs back
              if (!$(this).prev().is(":visible")) {
                $(this).next().css("display", "none");
                $(this).prev().css("display", "block");
                return;
              }
    
              $(this).prev().css("display", "none");
              $(this).next().css("display", "block");
            });
          });
<html>
     <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     </head>
      <body>
        <style>
          .tab {
            display: none;
          }
        </style>
        <div id="tabs">
          <div class="tab">
            <p>Tab 1</p>
          </div>
    
          <div class="tab">
            <p>Tab 2</p>
          </div>
    
          <div class="tab">
            <p>Tab 3</p>
          </div>
    
          <div class="tab">
            <p>Tab 4</p>
          </div>
        </div>
      </body>
    </html>

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

you are welcome @howrecepes. I have also added code to move back
GREAT SOLUTION. I LIKE THESE TYPES OF SOLUTIONS, VERY MINIMAL AND OPTIMIZED. THANKS

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.