Menu slide back up

Menu slide back up

I want my menu to categories to slide back up once another has been clicked on, they all slide down fine but the previous ones stay down. Here is my j query code: -

-------------------------------------

$(document).ready(function() {

//ACCORDION BUTTON ACTION
$('div.accordionButton').click(function() {
$('div.accordionContent').slideUp('normal');
$(this).next().slideDown('normal');
});

//HIDE THE DIVS ON PAGE LOAD
$("div.accordionContent").hide();

});

Here is my css menu coding, I think I may have to link the sections in the J query document in some way just not sure how: -

------------------------------------------------------------------------------------

#menu {
width: 200px;
margin-left: auto;
margin-right: auto;
}

a:link {
color: #ffffff;
background-color: #000000;
}

a:visited {
color: #ffffff;
background-color: #000000;
text-decoration:none;
}

a:active {
background-color: #000000;
text-decoration:none;
}

a:hover {
color: #ed8342;
text-decoration:none;
}

p.first
{
line-height: 150%;
padding-top: 10px;
padding-bottom: 10px;
font-size: 14px;
padding-left: 10px;
padding-right: 10px;
background-color: #000000;
width: 180px;
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: italic;
position: absolute;
bottom: 0;
}

.accordionButton {
width: 198px;
float: left;
background: #ed8342;
border: 1px solid #000000;
cursor: pointer;
}



.home {
position: relative;
width: 200px;
height: 289px;
float: left;
background-image: url(home.jpg);
display: none;
}

.about {
position: relative;
width: 200px;
height: 289px;
float: left;
background-image: url(about.jpg);
display: none;
}

.services {
position: relative;
width: 200px;
height: 296px;
float: left;
background: purple;
background-image: url(services.jpg);
display: none;
}

.styles {
position: relative;
width: 200px;
height: 303px;
float: left;
background: yellow;
background-image: url(styles.jpg);
display: none;
}

.prices {
position: relative;
width: 200px;
height: 300px;
float: left;
background: red;
background-image: url(prices.jpg);
display: none;
}

.contact {
position: relative;
width: 200px;
height: 330px;
float: left;
background: black;
background-image: url(contact.jpg);
display: none;
}

Any help greatly appreciated, thank you.[/img]