K2 CATEGORY 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(){ 


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


});

});
</script>

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

<?php

//DB
$db =& JFactory::getDBO();
$queryz = "SELECT * FROM jos_k2_categories WHERE published = '1' ORDER BY ordering ASC";

$db->setQuery( $queryz);

$rows = $db->loadObjectList();

foreach($rows as $row)
{

$id=$row->id;
$name = $row->name;
$pub= $row->published;
$image= $row->image;
$desc= $row->description;
?>
<script>
$(document).ready(function(){
$("#st<?php echo $id; ?>").click(function(){
chiudi_stagioni();
$("#st<?php echo $id; ?> .showstagione").animate({

    height: '180px'
  }, 500, function() {
$('#st<?php echo $id; ?> .showstagione').show();
  });
});

});
</script>
<div id="st<?php echo $id; ?>" style="width: 100%; background: blue; border: solid 1px black; margin: 0px; font-size: 20px; padding: 10px; text-align: left;">
<?php echo $name; ?>
<div class="showstagione" style="border: solid 0px yellow; width: auto; height: 0px; display: none;">
<div style="float: left;"><img src="http://musicainsiemebologna.overgrid.com/media/k2/categories/<?php echo $id; ?>.jpg" width="100" style="margin-top: 10px; margin-right: 10px;"></div>
<div style="float: left; font-size: 14px; width: 975px; margin-top: -5px;"><?php echo $desc; ?></div>
<div style="clear: both;"></div>
</div>
</div>

<?php
}


?>







</div>