Slide Effects for Tabs

Question

I'm trying to make a slide effect between tabs. Here is the jQuery code:

$(document).ready(function(){
   $('#tabs').tabs();
});

$(document).click(function() {
   $( "#tabs" ).effect( "slide", "medium" );
});

This works but it works if you click anywhere on the page. I want it to work only when you click that tab. I know its because I have to get rid of the "document" from the click function. I've tried replacing "document" with #tabs, #tabs .ui-tabs-nav ul, #tabs .ui-tabs-nav li. What do I put in there for the click function?

Answer 1

Try this ..

  $(document).ready(function(){
   $('#tabs').tabs();

   $("#tabs").click(function() {
         $(this).effect( "slide", "medium" );
     });
 });

--- Or for tab anchor click :

 $(document).ready(function(){
    $('#tabs').tabs();

   $("#tabs a").click(function() {
        $('#tabs').effect( "slide", "medium" );
   });
 });

Answer 2

 $(document).ready(function(){
     $('#tabs').click(function(){
       $(this).tabs();
     });
 });