0

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!

CodeWizard
  • 128,036
  • 21
  • 144
  • 167
Nima
  • 13
  • 3

1 Answers1

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');
        });
})
Guruprasad J Rao
  • 29,410
  • 14
  • 101
  • 200
  • Thanks for your help friend, I will accept your answer soon. – Nima May 19 '15 at 09:14
  • Out of curiosity , would you be able to help me with assigning each button with a specific icon and assign "current state" to the icons. I'm trying to achieve a different colour icon on "currently selected estate" – Nima May 19 '15 at 09:17