jQuery show/hide toggle DIVs

Question

So, I've successfully got a script working that shows/hides divs by clicking on the month.

If you scroll to the bottom of http://kaye.at/test/ and click 'April' or 'May' you can see it working.

The issue is I don't like how it animates sliding out to the left when it's closing, I'd rather it slide down or back up instead, but can't find where in the javascript to amend this?

Here's the JS:

$(document).ready(function() {
  $('.nav-toggle').click(function(){
        //get collapse content selector
        var collapse_content_selector = $(this).attr('href');                   
        //make the collapse content to be shown or hide
        var toggle_switch = $(this);
        $(collapse_content_selector).toggle(function(){
           if($(this).css('display')=='none'){}else{}
        });
   });
});

And the HTML:

<div id="wrapper-alt" class="shade8">
  <div class="content">
    <h1 class="full"><a href="#collapse1" class="nav-toggle shade81">APRIL</a></h1>
  </div>
</div>

<div id="collapse1" style="display:none">
   <div id="wrapper-alt" class="shade8">
     <div class="content">
         Content goes here
     </div>
   </div>
</div>  

Apologies if my JS is messy, I'm a complete amateur, just play around with it for fun and learning!

Also, I've just noticed it doesn't work with multiple DIVs, all links only open the 1 div, how do I use it for multiple different DIVs?

Answer 1

I ended up using a different script as I couldn't seem to get it to work correctly!

Answer 2

slideToggle() jquery's method

$('.nav-toggle').click(function(){
        //get collapse content selector
        var collapse_content_selector = $(this).attr('href');                   

        //make the collapse content to be shown or hide
        var toggle_switch = $(this);
        $(collapse_content_selector).slideToggle(function(){
          if($(this).css('display')=='none'){}else{          
          }
        });
      });