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

Navigation
2

I'm using a plugin of tab.js and to change tab it uses slideUp() and slideDown() .

I just want 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

    
asked by anonymous 08.05.2014 / 21:06

1 answer

1

Here is a horizontal slide example. I have to say that slideUp () and slideDown () do not allow you to do the same horizontal effect.

This is an example I made, similar to your code is to use the menu index to get the div you want to see. Note also the HTML that has a wrapper for the slides / tabs.

I did not have time to adapt your code, but if I do not understand, I can do that 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

    
08.05.2014 / 23:56
Input bugando without reason Generate a table from other 5