[jQuery] Modify tabbed interface
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 conten to:
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))
P. S. I posted this message in the night, but it seems not to be
publicly posted, so I try again)