title: Jquery animate hide and show
body: <p>I would like to have two things happen at once when I click on a link. I am slowly going through Jquery documentation, but have yet to learn what I need yet. </p>
  
  <p>Here is a link to my <a href="http://www.dimd.nait.ab.ca/~akitson1/Scatliff/" rel="nofollow noreferrer">site</a></p>
  
  <p>When I click on the services link I would Like the <code>#slideshow</code> <code>div</code> to hide, and a new div to replace it. </p>
  
  <p>I had tried to just have the slideshow animate out on clicking the services link, but it would either do the animate function or go to the linked html page, not both. How would I accomplish both.</p>
  
  <p>It doesn't matter if I just hide and show divs on the same page, or if I go to a new html page. I just want to have the animate function and change the content while hiding one.</p>
  
  <p>this is the jquery code I am using</p>
  
  <pre><code>$(document).ready(function(){   
    $("a.home").toggle(
      function(){
        $("#slideshow").animate({ height: 'hide', opacity: 'hide' }, 'slow');   
      },
      function(){
        $("#slideshow").animate({ height: 'show', opacity: 'show' }, 'slow');   
      }
    );
  });
  
  $(document).ready(function(){   
    $("a.services").toggle(
      function(){
        $("#slideshow2").animate({ height: 'show', opacity: 'show' }, 'slow');
      },
      function(){
        $("#slideshow2").animate({ height: 'hide', opacity: 'hide' }, 'slow');
      }
    );
  });
  </code></pre>
  
  <p>home and services are the two links, and I would like services when clicked to hide the <code>#slideshow</code> <code>div</code>, and show the <code>slideshow2</code> <code>div</code>, which would be hidden and then replace the first one.</p>
  
  <p>there is a fair amount of html so it may be easier to view my source from the link.</p>