I have a series of text areas stacked. Each one has a slide toggle applied. I would like to be able to adjust the height of the wrapper relative to their showing or hiding. For instance if one shows the height increases 150px, when two show height increases a total of 300px. You can see the issue here… http://joeeckloffdesigns.com/index_js_test.html

Code:
		
    $("#main p").css({
			"display":"none", 
});

    $("#design_dev span").click(function () {
        $("#design_dev p").slideToggle("slow", function(){


/*This is the problem area*/	
		if	($("#design_dev p").is(":visible")) {
		$("#wrapper").css('height', '+150');
		}
	else	{
		$("#wrapper").css('height', '-150');
		}
	 });
});
/* End problem area*/

    $("#zen span").click(function () {
        $("#zen p").slideToggle("slow");
    });
    $("#redesigns span").click(function () {
        $("#redesigns p").slideToggle("slow");
    });
    $("#packaging .col_1 span").click(function () {
        $("#packaging .col_1 p").slideToggle("slow");
    });
    $("#packaging .col_2 span").click(function () {
				$("#packaging .col_2 p").slideToggle("slow");
    });

  
}
Any help would be greatly appreciated.