jquery expand div parent innerhtml height
<p>Working prototype:
<a href="http://jsfiddle.net/ad5qa/K5fdZ/28/" rel="nofollow">http://jsfiddle.net/ad5qa/K5fdZ/28/</a></p>

<p>For some reason when the more button is clicked the parentsUntil is grabbing all divs in the page. I just want to get the div.htmlbox and have the height auto so I can see the full contents. Then click less to shrink it back down to 50px height. Any help would be greatly appreciated.  </p>

<pre><code>$('.morebox a').toggle(function() {
   var $this = $(this);
   var $parent =$this.parentsUntil('.htmlbox');

   $parent.height('auto')
   $this.text('less')
   $parent.css('border', '2px solid magenta')
   $this.css('border', '2px solid red')
}, function() {
   $parent.height('50px')
   $this.text('more')
});​

&lt;h3&gt;Description&lt;/h3&gt;
&lt;div class="htmlbox"&gt;
 This is a samle description that goes here with short or long content in this panel. If the text is higher than 50px then it should be hidden by the box. You must click expand to view the remaining content in the html box div. The float box is used to cut off the overflow of the content. 
&lt;div class="fade-overlay"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="morebox"&gt;
    &lt;img align="absmiddle" alt="more-less grabber" src="http://goo.gl/ho277"&gt;
    &lt;a href="#" style="line-height: 10px"&gt;more&lt;/a&gt;
    &lt;img align="absmiddle" alt="more-less grabber" src="http://goo.gl/ho277"&gt;
&lt;/div&gt;
</code></pre>
