How to create a multiple tab sliding menu with arrow navigation using jQuery?

The tutorial on Multiple tab menu is already been published but now I'm taking it to a next level. In this multiple tab menu the content will scroll to the next content of active tab. Not only this but changing of height will also take place. On hove to tabs, the navigation arrow will appear on either side of tabs which will also help to navigate the content. Lets begin with it:

DEMO

See the Pen Sliding Multiple Tabs with Arrow navigation by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.

Find this project on Github

If you've noticed then the markup is quite simple as the ID of the button should be same as the ID of its container relatively. However, it is not a plugin that can be used with any markup. The jQuery and CSS is written according to the HTML.

How really it works?

The markup is something like this:

<script src='multipletab.js' type='text/javascript'/>
<script src='jQuery.js' type='text/javascript'/>
<link rel='stylesheet' href='style.css'/>
<div class='multipletab'>
  <div class='tab-buttons'>
      <span id='content1'>Button1</span>
    <span id='content2'>Button2</span>
    <span id='content3'>Button3</span>
    <!--add more button right after it with same id attribute of that container. Make sure to use span tag.-->
  </div>
  <div class='tab-content'>
      <div id='content1'>THE CONTENT OF FIRST TAB.</div>
    <div id='content2'>This is Second Containter.</div>
    <div id='content3'> THE CONTENT OF 3RD CONTAINER GOES HERE</div>
    <!--add more container right after it with same id attribute of that button. Make sure to use div tag.-->
  </div>
  <!--arrow navigation-->
  <div class='tab-nav'>
  <span class='next'></span>
    <span class='prev'></span>
  </div>
</div>

Lets set the first the the tabs when they will load on the page. Actually, each of the container will have position absolute and they will slide according to their CSS property left. So first I'm going to set them in horizontal position and set their left and width (subtract padding from width) property. Their position will be something like this one:

So for that I'm going to use the following code:

$('.tab-buttons>span').first().addClass('active');
$('.tab-content>div').each(function () {
    var activeid = $('.active').attr('id');
    if ($(this).attr('id') == activeid) {
        $(this).addClass('activetab');
    }
    var currentheight = $('.activetab').height();
    var currentwidth = $('.multipletab').width();
    var currentindex = $(this).index();
    var currentposition = currentindex * currentwidth;
    $(this).css({
        'left': currentposition,
            'width': currentwidth - 40,
            'padding': '10px 20px'
    });
    $('.tab-content').css('height', currentheight + 20);
});

Description for above code

Formerly, first button in the set of buttons will get the class active, then the container with same id as the active class button will have class activetab. Now we have correct tab to work. As the position of the containers are absolute so we also need to update the height of outer wrapper. So what we will do is to multiply the position of container (we will get the position of container using .index() function) with the width of outer wrapper, the value which will get will be the value of left attribute. But for some reasons, it is necessary to add padding in the container too, so we will subtract the 40px from it and add padding on both horizontal sides. And also update the height of outer container with the height of activetab.

Popular: How to create dynamic tabs with lava lamp effect using Jquery?

Button Click Event

The id of button and its container is same. So we will create function that will find find the same id of the container as the button.Before that the button which is clicked will have class active, so that it may helpful to add CSS and for further functioning. I'll create a function as a namespace so I can declare it on several places easily. To create a namespace function do like this:

MyFunction = function () {
    // Do something
};
MyFunction(); // Declare your function like this

 So I created a function this one

$.FindId = function () {
    $('.tab-content>div').each(function () {
        if ($(this).attr('id') == $('.active').attr('id')) {
            $('.tab-content>div').removeClass('activetab');
            $(this).addClass('activetab');
        }

 The above function will find the active class button and match its id attribute with the containers. The container which will match with its id will have the id activetab. Till now we have the correct container, so what next?

Now we will find the position of the activetab container and update its left attribute (which we added in first code). So I'm going to create a namespace function as I will again use is in further code. The following code will be used:

$.FindContainer = function () {
    $('.tab-content>div').each(function findcontent() {
        var newindex = $('.activetab').index();
        var newheight = $('.activetab').height();
        $('.tab-content').animate({
            'height': newheight + 20
        }, 100);
        var otherindex = $(this).index();
        var substractindex = otherindex - newindex;
        var currentwidth = $('.multipletab').width();
        var newpositions = substractindex * currentwidth;
        $(this).animate({
            'left': newpositions
        });
    });
};

According to this code the containers will shift like this:

Navigation arrows

Now for navigation arrow we have two condition for next button we have condition that if the tab is last tab then the first tab should be shifted. For previous button we have condition if the tab is first tab and previous button is clicked then the last tab should be selected. So for that I'm going to first find the index number of active tab and will match it with. I'm not going in depth but you can easily judge it in code. Actually the two functions that I created before that is $.FindContainer and $.FindId will again used here, you can see it in code.

Final Words

Some of the useful plugins like sliders which have sliding as transition mode uses the same method of shifting of slides. I created multiple tab menu you can create some more creative stuff from it you can also send me suggestion in comments.