slideUp() -slideDown(). What's wrong with this???

slideUp() -slideDown(). What's wrong with this???

Hi,

In my page I have several of the blocks below:

<div class="bookcaptionSwitch">Book caption</div>
<div class="bookcaption">
    <p>Text text text. Text text text</div>
</div>

[...]

This is my JQuery code:

function init(){
    $(".bookcaptionSwitch").css("cursor","pointer");
    $(".bookcaption p").slideUp();
          $(".bookcaptionSwitch").mouseover(function({$(this).css("color","red");$(this).next("bookcaption").slideDown();})
    $(".bookcaptionSwitch").mouseout(function(){$(this).css("color","");$(this).next(".bookcaption").slideUp();})
}

So on page load I have this:
Book caption
Book caption
Book caption

When I mouse over a Book caption line I want the text below that specific line (the "<p>Text text text. Text text text</div>" part) to slide down into view pushing the lines below down. If I move my mouse off the line, I want the text below that specific line to slide up, disappearing from view and moving the lines below up.

I guess this is very simple top do in JQuery but all I get is the line changes to red (as intended) but I can't get the accompanying text to slide into view.

Can anyone tell me how to do this???

Thanks!