How to modify tabbed interface?

Question

Hello, everyone)

I've read a tutorial describing creating simple tabs: http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/ But I want to modify it, and cannot achieve the desired result, and that result can be seen at one template: http://themeforest.net/item/maven-portfolio-wordpress/49522?no_login=true (Just click on 'Live Preview')

So, I want a content: 1. slideUp() and fadeOut() simultaneously 2. slideDown() and fadeIn() simultaneously

I found an interesting article about a subject: http://www.learningjquery.com/2008/02/simple-effects-plugins But still, as I said, I don't know how to do that.

The code I use now:

(function($) {
    $.fn.slideFadeToggle = function(speed, easing, callback) {
     return this.animate({
             opacity: 'toggle',
          height: 'toggle',
     }, speed, easing, callback);
    }   
})(jQuery)



$(function() {
    $('.tab-content').hide();
    $('ul.tabs li:first').addClass('active');
    $('.tab-content:first').show();

    $('ul.tabs li a').click(function() {
        $("ul.tabs li").removeClass("active");
        $(this).parent().addClass('active');
        $('.tab-content').hide();
        var href = $(this).attr('href');
        $(href).slideFadeToggle('slow');
        return false;  
    });
});

Thank you very much, if you can help me))

Answer 1

Try this:

(function($) {
    $.fn.slideFadeToggle = function(speed, easing, callback) {
        return this.animate({
             opacity: 'toggle',
             height: 'toggle',
        }, speed, easing, callback);
    }   
})(jQuery)
$(document).ready(function() {
    $('.tab-content').hide();
    $('ul.tabs li:first').addClass('active');
    $('.tab-content:first').addClass('active').show();

    $('ul.tabs li').click(function() {
        $("ul.tabs li").removeClass("active");
        $(this).addClass('active');
        var activeTab = $(this).find("a").attr("href");
        $('.tab-content.active').removeClass('active').slideFadeToggle('slow',function(){
            $(activeTab).addClass('active').slideFadeToggle('slow',function(){});
        });
        return false;
    });
});

Your code still was calling

$('.tab-content').hide();

which hides everything before you even animate anything. Also you needed to use the call back function. Meaning you call the animation on the active tab content and when its done you call it on the new active content.

For it all working with the original example you were working off of check out http://jsbin.com/egohi