Ciao a tutti!!
ho un problema con un semplice codice javascript,
in pratica ho un tag span, che cliccando su un'area definita si espande con slideToggle, e a sua volta gli altri, o meglio l'altro aperto in quel momento si contraggono.

Praticamente quando si apre è come se si aprisse al 100% per poi creare l'effetto.

Qualcuno mi sa dare qualche dritta??

Vi allego il codice, altrimenti diventa impossibile capirsi ^_^

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Accordion 1</title>

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>

<script type="text/javascript">
$(document).ready(function(){

// $(".accordion h3:first").addClass("active");
//$(".accordion #box:first").addClass("active");

$(".barra1 span.area").hide();
$(".barra2 span.area").hide();
$(".barra3 span.area").hide();
$(".barra4 span.area").hide();


$(".barra1 #box1").click(function(){
$(".barra1 span.area").slideToggle("slow");

$(".barra2 span.area").slideUp();
$(".barra3 span.area").slideUp();
$(".barra4 span.area").slideUp();

});

$(".barra2 #box1").click(function(){
$(this).next("span.area").slideToggle("slow").sibl ings("span.area:visible").slideUp("slow");
$(".barra1 span.area").slideUp();
$(".barra3 span.area").slideUp();
$(".barra4 span.area").slideUp();

});

$(".barra3 #box1").click(function(){
$(this).next("span.area").slideToggle("slow").sibl ings("span.area:visible").slideUp("slow");
$(".barra2 span.area").slideUp();
$(".barra1 span.area").slideUp();
$(".barra4 span.area").slideUp();

});

$(".barra4 #box1").click(function(){
$(this).next("span.area").slideToggle("slow").sibl ings("span.area:visible").slideUp("slow");
$(".barra2 span.area").slideUp();
$(".barra3 span.area").slideUp();
$(".barra1 span.area").slideUp();

});





});
</script>


<link href="galli.css" rel="stylesheet" type="text/css" />
</head><body>

<div class="barra1">
<div id="box1" class="">Question One Sample Text</div>
<span class="area">Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada,
ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia
massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio.
Vivamus vitae ligula.</span>

</div>

<div class="barra2">
<div id="box1" class="">Question One Sample Text</div>
<span class="area">Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada,
ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia
massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio.
Vivamus vitae ligula.</span>

</div>

<div class="barra3">
<div id="box1" class="">Question One Sample Text</div>
<span class="area">Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada,
ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia
massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio.
Vivamus vitae ligula.</span>

</div>

<div class="barra4">
<div id="box1" class="">Question One Sample Text</div>
<span class="area">Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada,
ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia
massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio.
Vivamus vitae ligula.</span>

</div>


</body></html>

//CSS qui il foglio di stile

body {
width: 100%;
font: 75%/120% Arial, Helvetica, sans-serif;
margin-right: auto;
margin-left: auto;
margin: 0;
}
.barra1 {
width: 100%;
border-bottom: solid 1px #c4c4c4;
background-image: url(img/test_bkg.jpg);
}
.barra1 #box1 {
padding: 7px 15px;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
width: 100%;
margin: 0;
}
.barra1 #box1:hover {
}
.barra1 #box1.active {
background-position: right 5px;
}
.area {
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
margin-right: 0;
margin-top: 0;
margin-left: 0;
}

.barra2 {
width: 100%;
border-bottom: solid 1px #c4c4c4;
background-image: url(img/test_bkg1.jpg);
}
.barra2 #box1 {
padding: 7px 15px;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
width: 100%;
margin: 0;
}
.barra2 #box1:hover {
}
.barra2 #box1.active {
background-position: right 5px;
}



.barra3 {
width: 100%;
border-bottom: solid 1px #c4c4c4;
background-image: url(img/test_bkg2.jpg);
}
.barra3 #box1 {
padding: 7px 15px;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
width: 100%;
margin: 0;
}
.barra3 #box1:hover {
}
.barra3 #box1.active {
background-position: right 5px;
}


.barra4 {
width: 100%;
border-bottom: solid 1px #c4c4c4;
background-image: url(img/test_bkg4.jpg);
}
.barra4 #box1 {
padding: 7px 15px;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
width: 100%;
margin: 0;
}
.barra4 #box1:hover {
}
.barra4 #box1.active {
background-position: right 5px;
}