[jQuery] sliding previous/next content

[Marco Barbosa]

Hi all!

So what I'm trying to do is so simple but it's not working..
All I want to do is to slide up/down to the next/previous content.

Here's the code:
<id="calendar">
   <a href="#" class="arrowUp">Previous</a>
   <h3>Calendar</h3>
   <ul class="events current">
     <li>Content1</li>
     <li>Content2</li>
     <li>Content3</li>
   </ul>
   <ul class="events">
     <li>Content4</li>
     <li>Content5</li>
     <li>Content6</li>
   </ul>
   <ul class="events">
     <li>Content7</li>
     <li>Content8</li>
     <li>Content9</li>
   </ul>
   <a href="#" class="arrowDown">Next</a>
</div>

Clicking arrow up down should bring up Content4, 5 and 6 and so on.

Here's how I'm trying to do it:
$('.arrowUp').click(function(){
    $('.events.current').removeClass("current").previous().slideDown
("slow").addClass("current");
});
$('.arrowDown').click(function(){
    $('.events.current').removeClass("current").next().slideUp
("slow").addClass("current");
});

the .events has display:none;
and .events.current has display:block;

What am I doing wrong?
Is there a easier way to do this?