jQuery Forum

I have three <div> with text. On clicking on a menu <div>, the associated text <div> will slideDown(). When I click the next one, I have the last one hide() and the next slideDown(), but I would rather have the last one fadeOut() before the next one slideDown().

But the next <div> 'pushes' the last one down as it fades. Not pretty.

Here's what I've got now. The only one I've tried to get to work the way I want is the <div class="work_button"> And no giggling at my elementary code:

1. $(function(){
          
           $(".panel").hide();
          
           $(".work_button").click(function(){
           $("#cms, #contact").fadeOut();
           $("#work").slideDown();
           });
          
           $(".cms_button").click(function(){
           $("#work, #contact").hide();
           $("#cms").slideDown();
           });
          
           $(".contact_button").click(function(){
           $("#work, #cms").hide();
           $("#contact").slideDown();
           });
          
           $(".home_button").click(function(){
           $(".panel").hide();
           });
   });

Oh, and if there's a kind person to help me shorten this block of code, I wouldn't mind that.