JQUERY ACCORDION

  <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>

<script>

function chiudi_stagioni(){


$(".showstagione").animate({
    height: '0px',
  
  }, 500, function() {
  $('.showstagione').hide()
  });



}


$(document).ready(function(){ 

$("#stagione1").click(function(){
chiudi_stagioni();
$("#stagione1 .showstagione").animate({

    height: '100px'
  }, 500, function() {
$('#stagione1 .showstagione').show();
  });
});

$("#stagione2").click(function(){
chiudi_stagioni();
$("#stagione2 .showstagione").animate({
    height: '100px'
 
  }, 500, function() {
$('#stagione2 .showstagione').show();
  });


});

});
</script>
<?php




?>

<div id="box-stagioni" style="width: 100%; border: solid 1px red; margin-bottom: 10px; height: auto;">

<div id="stagione1" style="width: 100%; background: blue; border: solid 1px blue; margin: 0px;">
STAGIONE 1
<div class="showstagione" style="border: solid 1px yellow; width: 100%; height: 0px; display: none;">ciao</div>
</div>

<div id="stagione2" style="width: 100%; background: blue; border: solid 1px blue; margin: 0px;">
STAGIONE 2
<div class="showstagione" style="border: solid 1px yellow; width: 100%; height: 0px;  display: none;">ciao</div>
</div>


</div>