Help me simplify this jQuery code, please

Question

The function of this code is to show/hide divs by way of fadeIn/fadeOut, starting with an empty div (home) and fading in one of the other divs (work,cms,contact,) on click, then fading out the last div and fading in the next on click, and then fading out any div and fading in 'panel' (an empty div) when you click on home.

<script type='text/javascript'>
 $(function(){
      $('.panel').hide();

      $('.work_button').click(function(){
            $('#cms,#contact').fadeOut(function(){
            $('#work').fadeIn();
            });
      });

      $('.cms_button').click(function(){
            $('#work,#contact').fadeOut(function(){
                  $('#cms').fadeIn();
            });
      });

      $('.contact_button').click(function(){
            $('#cms,#work').fadeOut(function(){
                  $('#contact').fadeIn();
            });
      });

      $('.home_button').click(function(){
            $('.panel:visible').fadeOut();
      });
});
</script>

<div class="menu">
<ul class="menu">
<li class="home_button">home</li>
<li class="work_button">work</li>
<li class="cms_button">cms</a></li>
<li class="contact_button">contact</a></li>
</ul>
</div>

<div class="panel" id="work">
<p>...</p>
</div>

<div class="panel" id="cms">
<p>...</p>
</div>

<div class="panel" id="contact">
<p>...</p>
</div>

Answer 1

I have no problem setting this up in html - it makes sense in this case.

<div class="menu">
<ul class="menu">
<li class="home_button">home</li>
<li class="work_button"><a href="#work" data-fadeOut="#cms,#contact">work</a></li>
<li class="cms_button"><a href="#cms" data-fadeOut="#work,#contact">cms</a></li>
<li class="contact_button"><a href="#contact" data-fadeOut="#cms,#work">contact</a></li>
</ul>
</div>

Set a target on each one

$(function() {
    $('li a', '.menu').click(function(e) {
      e.preventDefault();
      var target = $($(this).attr('href'));
      $($(this).data('fadeOut')).fadeOut(function(){ 
        target.fadeIn();
      });
    })
    $('.panel').hide();
    $('.home_button').click(function(){
        $('.panel:visible').fadeOut();
    });
})

You get the nifty coincidental benefit here of this working ok even without javascript since <a href="#id"></a> also happens to be the the syntax for 'scroll-to element'

Also, you should not name functions with an uppercase capital. Because javascript has no native way of determining which functions are meant to be run in a functional style and which are meant to be used as constructors with the new keyword, it is a very well known convention to use upper case names only for functions which are meant to be invoked with the new keyword. Learn more about javascript capitalization conventions here.

Edit: Totally misread your code. I believe my rewrite now reflects what you're trying to do