Accordion adjusting background/container div
<p>I'm trying to adjust the height of the container div grow or when the accordion collapses. the collapsing works but when contracting its not adjusting resulting in the accordion overlaying the div. is there a simpler way to  auto adjust a container height?</p>

<pre><code>&lt;script type="text/javascript"&gt;
    $(document).ready(function(){
        $(".acc_body").hide();

        $(".acc_head").click(function(){
            $(this).toggleClass("acc_head2").next(".acc_body").slideToggle(150);
        });

        $("div.mainBkgd").click(function(){
            var $this = $(this);
            if ($this.height() == 930) {
                // set height to auto in order to check how tall it is in current window size    
                $this.css("height","auto");
                var height = $this.height();

                // done checking height, set back to 30
                $this.css("height","930px");

                $this.animate({height: height + "px"},1500, function() {
                    // animation done, set height to auto to allow resizing with window resize
                    $this.css("height","auto");        
                }); 
            }
            else {
                $this.animate({height: "930px"},1500);
            }
        });
    });
&lt;/script&gt;
</code></pre>
