Problem while animating boxes using jQuery

Question

On my webpage, I have a few boxes one below the other, on the right side. Each box has a '+' and '-' button which maximizes/minimizes to the specified size, similar to that in portlets. But, for some reason, it is not working as it is suppose to. Here is the code for '-' button:

<script type="text/javascript">
$(function() {
    <?php for($i=0;$i<count($modules);$i++) : ?>        
    $( "#minusbtn<?=$modules[$i]["title"]?>").click(
    function() {
        $( "#effect<?=$modules[$i]  ["title"]?>").animate({                 
height: 35,
}, "slow" );
    <?php $count=0; $top=0; ?>  
    <?php for($j=$i;$j<count($modules);$j++): ?>
    <?php if($i==$j) continue; ?>
        $( "#effect<?=$modules[$j]["title"]?>" ).animate({
        top: <?=($top)?>,
        }, "slow" );
    <?php $count++; $top = (210*$count); ?> 
    <?php endfor; ?>
    });

Please help!

Answer 1

All it is that makes the boxes is this:

$( ".portlet-header" ).click(function() {
    $( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
});

As seen here: http://jsfiddle.net/ndHK4/ .