Problema slide verticale jQuery

[ramemc]

Ciao.
Ho un bel dilemma che non sono riuscito a risolvere.
Prima di tutto posto il codice:
XHTML:

<div id="menu">
<div id="botton_1" class="botton" ></div>
<div id="botton_2" class="botton"></div>
<div id="botton_3" class="botton"></div>
<div id="botton_4" class="botton"></div>
<div id="botton_5" class="botton"></div>
</div>
<div id="Redazione"> </div>
<div id="Arretrati"> </div>
<div id="Galleria"> </div>
<div id="PezziSparsi"> </div>
<div id="Contatti"> </div>

CSS:

#menu {
height: 175px;
width: 1200px;
background-color: #13100a;
}
.botton {
height: 125px;
width: 125px;
float: left;
margin: 25px 25px 0 0;
}
.botton a{
line-height: 125px;
display: block;
text-decoration: none;
}
#botton_1 {
background-image: url(botton_1.jpg);
margin-left: 250px;
}
#botton_2 {
background-image: url(bottonn_2.jpg);
}
#botton_3 {
background-image: url(botton_3.jpg);
}
#botton_4 {
background-image: url(botton_4.jpg);
}
#botton_5 {
background-image: url(botton_5.jpg);
}
#Redazione{
display: none;
width: 1200px;
background-color: #CCC;
}
#Arretrati{
display: none;
width: 1200px;
background-color: #0F0;
}
#Galleria{
display: none;
width: 1200px;
background-color: #33C;
}
#PezziSparsi{
display: none;
width: 1200px;
background-color: #6CF;
}
#Contatti{
display: none;
width: 1200px;
background-color: #C06;
}

File jQuery:

function mostraRedazione(){
$("#Redazione").animate({"height": "toggle"}, { duration: 600 });
}
function mostraArretrati(){
$("#Arretrati").animate({"height": "toggle"}, { duration: 600 });
}
function mostraGalleria(){
$("#Galleria").animate({"height": "toggle"}, { duration: 600 });
}
function mostraPezziSparsi(){
$("#PezziSparsi").animate({"height": "toggle"}, { duration: 600 });
}
function mostraContatti(){
$("#Contatti").animate({"height": "toggle"}, { duration: 600 });
}

Bene.Tuttto funziona.
Ci sono 5 pulsanti.Ogni pulsante fa aprire uno slide verticale che appare.
Ecco il problema a cui non trovo una soluzione:
Se clicclo su più pulsanti ovviamente si aprono più slide.Ma non è la mia intenzione.
Io vorrei che se clicco un pulsante quando uno slide è già aperto, questo si chiuda e apra quello nuovo:
esempio:
Clicclo sul bottone 1 e si apre lo slide 1.Clicco sul bottone 2, lo slide 1 sichiude e si apre lo slide 2.
Io non so come fare ç.ç

Ringrazio in anticipo chiunque risponda che sia di aiuto o no.

[ramemc]

Aggiungo il link per la prova:
http://provapersimone.altervista.org/

come vedete i div compaiono al cliccare sui bottoni ma si sovrappongono.
Io vorrei una cosa del genere:
clicclo sul bottone 1 e si apre il div 1.Clicco sul bottone 2,prima il div 1 si chiude, e poi si apre il div 2. Non so come fare.
Ringrazio in anticipo.

[lucavizzi]

<div id="menu"> 
 <div id="botton_1" class="botton" ></div>
 <div id="botton_2" class="botton"></div>
 <div id="botton_3" class="botton"></div>
 <div id="botton_4" class="botton"></div>
 <div id="botton_5" class="botton"></div>
</div>
 <div id="Redazione" class="box"></div>
 <div id="Arretrati" class="box"></div>
 <div id="Galleria" class="box"></div>
 <div id="PezziSparsi" class="box"></div>
 <div id="Contatti" class="box"></div>

$(function(){
   $('.botton a').click(function(){
      var boxDaAprire=$(this).attr('class');
      $('.box:visible').slideUp(600);
      $('#'+boxDaAprire).slideDown(600);
   });
});

[ramemc]

Prima di fare qualsiasi osservazione ti ringrazio tantissimo.
Anche se non era proprio ciò che volevo mi hai aiutato molto e per questo ti ringrazio.
Ora cerco di spiegare cosè che non va ma ci tengo a dire che in ogni caso ti sono riconoscente e mi hai già aiutato molto quindi non mi aspetto nient'altro XD
Mi rivolgo a te ma accetto anche soluzioni di chiunque ovviamente
Comunque non si sa mai...

Con le tue rettifiche, che funzionano, ora cliccando da un pulsante all'altro i div slittano,se cosi si può dire.Cerco di spiegarmi.
Mi baso sul link che ho messo e che ho aggiornato con il tuo codice.
http://provapersimone.altervista.org/
Se per esempio clicco sullo stesso pulsante in cui sono già cosa succede:
il div prima si richiude e poi si riapre.
Bene.Questo è l'effetto che cerco con qualsiasi tasto.

Cerco di spiegarmi meglio:

Con il tuo codice (il codice che cè ora):

Apro la pagina.Clicclo il pulsante 1 e si apre il div 1.
Clicco sul pulsante 2 e il div 2 arriva dal basso.

Quello che cerco:

Apro la pagina.Clicco il pulsante 1 e si apre il div 1.
Clicco sul pulsante 2, il div 1 si chiude e poi il div 2 si apre.

In ogni caso ti ringrazio ancora.

P.S.
Mi ero dimenticato di una cosa che potrebbe influire.
I div che ho utilizzato in questo esempio sono tutti uguali a parte il colore.
Ma in realtà avranno altezze e contenuti diversi.
Spero sia possibile comunque una soluzione altrimenti cercherò di adattarmi con altezze uguali.

[lucavizzi]

bisogna usare un callback:

$(function(){
   $('.botton a').click(function(){
      var boxDaAprire=$(this).attr('class');
      if($('.box:visible').length>0){//altrimenti il callback non scatta
         $('.box:visible').slideUp(600,function(){$('#'+boxDaAprire).slideDown(600);});
      }else{//sono tutti chiusi
         $('#'+boxDaAprire).slideDown(600);
      }
   });
});