Sliding jquery tabbed content

Question

Could somebody please help me to alter the tabbed content code to fade and slide the tabbed content in and out as the tabs change please.

I'm using this script.

And the code in the header bit:

$('ul.tabs li').click(function(){
    var tab_id = $(this).attr('data-tab');

    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $("#"+tab_id).addClass('current')
})

Many thanks!

Answer 1

You can try as below:

$('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');

        $('ul.tabs li').removeClass('current');
        $('.tab-content').fadeOut(100).removeClass('current');

        $(this).fadeIn(1000).addClass('current');
        $("#"+tab_id).fadeIn(1000).addClass('current');
 })

UPDATE

UPDATED DEMO

To SlideUp and SlideDown try as below:

$('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');

        $('ul.tabs li').removeClass('current');
        $('.tab-content').slideUp("slow",function(){
              $(this).removeClass('current');
        });
        $(this).addClass('current');
        $("#"+tab_id).slideDown("slow",function(){
              $(this).addClass('current');
        });
})