CODEWITHSUNDEEP
javascriptjquery
Lighty_46
Lighty_46

Reputation: 5170

How do I make these two divs the same height?

I have some groups of content which consists of two divs, both divs contain text, and I want the second div of each set to match the height of the first.

DEMO

HTML (Cannot be changed unfortunately)

<!-- group one -->
<div class="item">
    .... content here
</div>

<div class="item_open">
    .... content here too
</div>

<!-- group two -->
<div class="item">
    .... completely different content here
</div>

<div class="item_open">
    .... some more content here too
</div>

Upvotes: 2

Views: 76

Answers (5)

BenM
BenM

Reputation: 4278

Here is a fiddle using jQuery to achieve this.

http://jsfiddle.net/59Rhn/4/

$(".item_open").each(function(){
    $(this).height($(this).prev().height());
});

Upvotes: 1

Pierre Nortje
Pierre Nortje

Reputation: 826

I'm pretty sure that what you are looking for could be found here: http://www.ejeliot.com/blog/61

(Using CSS and not JQuery)

Upvotes: 1

SirDeveloper
SirDeveloper

Reputation: 276

If you cannot change HTML, you can try in this way..

var $item = $(document).find('.item'); // find first tag item
var $itemNext = $item.next();          // return item_open
$($item, $itemNext).css({
   height: '100px'
});

Upvotes: 0

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57095

Fiddle Demo

$('.item_open').height(function(){
    return $(this).prev().height();
});

.height()

.prev()

Upvotes: 2

Anton
Anton

Reputation: 32581

Try this

$('.item_open').height(function(){
 return $(this).prev().height();
});

DEMO

Upvotes: 6

Related Questions