Question

I have 8 tabs ranging in all different heights. Each having a similar class, and the active tab having its own class.

How can i get the height of the active tab and add it as a style to its parent? (When a different tab becomes active, the new height needs to be added.)

The code below is an example of what im trying to get. Thanks.

<div id="parent" style="height: 1426px;">
  <div class="child"></div>         ( height: 2245px )
  <div class="child"></div>         ( height: 983px )
  <div class="child"></div>         ( height: 3004px )
  <div class="child active"></div>  ( height: 1426px )
  <div class="child"></div>         ( height: 1209px )
</div>

Answer 1

You can do it like this:

$('#parent').height($('.active').height());

However, since the child is under the parent, you should probably do this instead:

$('#parent').height($('.active').outerHeight());

If you want to set the height when a new tab is selected, you have to put that line at the same place where you set the “active” class. It could look something like this:

$('#parent').find('.child').click(function() {
    var $this = $(this);
    $this.addClass('active').siblings().removeClass('active');
    $('#parent').height($this.outerHeight());
});