[jQuery] Re: Modify tabbed interface

Sat, 25 Jul 2009 06:33:19 -0700

theme is using jQuery UI tabs that have effects options built in, perhaps they would make it easier for you. There is a google group for UI support also if you have difficulty

http://jqueryui.com/demos/tabs/

Aleksey wrote: 
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 = ""
					$(href).slideFadeToggle('slow');
					return false;
				});
			});

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

Reply via email to