Tabs with slideup() and slideDown() for left and right

Question

I’m wearing a plugin of tab.js and to change tab he uses slideUp() and slideDown().

Only I’d like to use Left and Right. How to do?

My code:

$(document).ready(function() { 
(function ($) { 
    $('.tab ul.tabs').addClass('active').find('> li:eq(0)').addClass('current');
    $('.tab ul.tabs li a').click(function (g) { 
        var tab = $(this).closest('.tab'), 
            index = $(this).closest('li').index();  
            tab.find('ul.tabs > li').removeClass('current');
            $(this).closest('li').addClass('current');
            tab.find('.tab_content').find('div.tabs_item').not('div.tabs_item:eq(' + index + ')').slideUp();
            tab.find('.tab_content').find('div.tabs_item:eq(' + index + ')').slideDown();
        g.preventDefault();
    });
})(jQuery);

Link to the code used: Codepen

Answer 1

Here is an example of horizontal slide. I must say that slideup() and slideDown() do not allow to do the same horizontal effect.

This is an example I made, the resemblance to your code is to use the index menu to fetch the div you want to see. Also note the HTML that has a wrapper for slides/tabs.

I didn’t have time to adapt your code, but if you don’t understand I can do it tomorrow.

$('#menu div').on('click', function () {
    var index = $(this).index();
    var largura = $('#wrapper').width();
    var aberta = $('#wrapper div.aberta');
    var clicada = $('#wrapper div').eq(index);

    if (clicada.hasClass('aberta')) return false;

    aberta.animate({
        'left': -largura
    }, 200, function () {
        $(this).removeClass('aberta').hide();
    });

    clicada.css('left', '300px').show().animate({
        'left': '0px'
    }, 200).addClass('aberta');

});

Example