Question

I have a current resizing div code which works however it only resizes the div slightly and i am not sure how to edit the code so that the div resizes to a specific size!

Any help much appreciated!!

<script type="text/javascript">
$(document).ready(function(){    
$(".expanderHead").click(function(){
    var $exsign = $("#expanderSign");
    $(this).find("#expanderContent").slideToggle();
    $exsign.html($exsign.text() == '+' ? '-': '+');   
    // simplify your if/else into one line using ternary operator
    // if  $exsign.text() == "+" then use "-" else "+"
    });    
 });
 </script>

Answer 1

instead of this:

$(this).find("#expanderContent").slideToggle();

do this:

$(this).find("#expanderContent").animate({height: '50px'});

Update

See the jsfiddle: http://jsfiddle.net/csQYN/

As pointed by @JonathanSampson, slideToggle() will also save the previous state (the one to toggle back to). You you animate, you should be responsible to implement that.