Question

Working prototype:
http://jsfiddle.net/ad5qa/K5fdZ/28/

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.

$('.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')
});​

<h3>Description</h3>
<div class="htmlbox">
 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. 
<div class="fade-overlay"></div>
</div>
<div class="morebox">
    <img align="absmiddle" alt="more-less grabber" src="http://goo.gl/ho277">
    <a href="#" style="line-height: 10px">more</a>
    <img align="absmiddle" alt="more-less grabber" src="http://goo.gl/ho277">
</div>

Answer 1

If you only want that one element, then you wouldn’t use parentsUntil, you would use closest. However, .htmlbox is not an ancestor of your a at all. You will need to do something more complex. Additionally, you need to use this and not select all as.

$this.closest(".morebox").prev();

Note that this is highly dependent on your current html. If you change the structure you will need to modify this.