OK, I give up, 6 hours straight on this and no joy...

 

So, I have to columns, left and right. They need to be equal height. That's simple enough.

 

In the left hand column is a menu, with a sub menu. The sub menu is activated on click and reveals a vertical sub menu. Again, simple enough.

 

Combine the two? Nope! Not a hope! Each time the sub menu activated it pushes the content down and overlaps what is below it, essentially it is not adjusting the column heights.

 

Here is the Jquery;

// Equal Height Columns
     $(document).ready(function () {

        function equaliseIt() {
            $('.containerequal').each(function () {
                var highestBox = 0;
                $('.equal', this).each(function () {
                    if ($(this).height() > highestBox)
                        highestBox = $(this).height();
                });

                $('.equal', this).height(highestBox);
            });
        }

        //call the function at page load
        equaliseIt();  
    });
    
    // Show/hide sidebar menu
    $('.sub-menu').hide(); //Hide children by default

    $('.sidebar-navigation').children().click(function(){
    $(this).children('.sub-menu').slideToggle('slow'); 
    });
    
    // Add class to sidebar navigation
    $('.sidebar-navigation').on('click', function(e) {
      $('li.submenu').toggleClass("active-menu"); //you can list several class names 
    });

Here is the HTML

<?php get_header(); ?>
<div class="row containerequal">

<!--Main content -->
<main class="small-12 small-push-12 medium-9 medium-push-3 large-9 large-push-3 columns content-area equal" role="main">
<?php while ( have_posts() ) : the_post(); ?>

<!-- Article -->
<article <?php post_class() ?> id="post-<?php the_ID(); ?>">

<!-- Article header -->
<header>
<h1 class="entry-title"><?php the_title(); ?></h1>
</header>
<!-- End article header -->

<!-- Article content -->
<section class="entry-content">
<?php the_content(); ?>
    

    

    
    
    
    
</section>
<!-- End article content -->

</article>
<!-- End article -->
<?php endwhile; ?>

</main>
<!-- End main content -->

<aside id="global-sidebar" class="small-12 small-pull-12 medium-3 medium-pull-9 large-3 large-pull-9 columns equal">
    <div class="panel">
        <section id="sidebar-menu">
            <?php roothost_sidebar_menu(); ?>
        </section>
        
        <section id="sidebar-search">
            <h4>Can't Find What You're Looking For?</h4>
            <?php get_template_part( 'lib/templates/searchform' ); ?>
        </section>
        
        <section id="sidebar-family">
        <?php if( have_rows('pjc_companies', 110) ): ?>
            <h4>Chaffin Companies</h4>
            <ul class="small-block-grid-2 medium-block-grid-2 large-block-grid-2">

            <?php while( have_rows('pjc_companies', 110) ): the_row(); 

            // vars
            $image = get_sub_field('image', 110);
            $link = get_sub_field('link', 110);

            ?>

                <li>

                <?php if( $link ): ?>
                    <a href="<?php echo $link; ?>">
                <?php endif; ?>

                    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" />

                <?php if( $link ): ?>
                    </a>
                <?php endif; ?>

                </li>

            <?php endwhile; ?>

            </ul>

        <?php endif; ?>
        </section>
        
    </div>  
</aside>
</div>
<?php get_footer(); ?>

Any ideas here folks?

Perhaps you need to call the equaliseIt() after you've shown the sub-menu?

 

Or I'm not understanding your query. Do you have a screenshot or a fiddle demonstrating the problem?

If I've got this right, you could do this with display: table; instead of JS.

 

Here's a rough example http://jsfiddle.net/9bhsckaf/

My God! 6 hours wasted on poxy JQuery and a (in essence) back to basics method such as tables/table cells does the trick!

 

I did have to tweak a few height: 100%; instances though, but overall it works

 

Cheers Jack!!

 

In my defence, I haven't had a day off in almost 2 years (yes really!) and I'm working 7 days a week. So I am tired......

There's quite a lot of nonsense in that demo that could be stripped out, but as long as everything is display: table-cell; within a wrapper with display: table; it will work.

 

I remember when a coworker first showed me that.

 

 

 

The table cell method is a good one.

 

Sometimes, when I can't use it for equal heights, I use this - https://github.com/mattbanks/jQuery.equalHeights and call equal heights again, a few ms after the inner elements have resized.

This is one I wrote a while back for equal heights based on rows, where items on the same rows will all have equal heights rather than giving every targeted element the same height.

PROJECTNAME.equalHeights = {
    elementsArray: [],
    elements : '',
    init: function($) {
        "use strict";
        var elementsArray = [];
        this.elements = $('.js-equal-height');
        // reset the heights of all the selected elements
        this.elements.each(function() {
            // add each element to the array.
            elementsArray.push($(this));
        });
        this.elementsArray = elementsArray;
        this.execute($);
    },
    execute: function($) {
        if (WASABIWEB.equalHeights.elements.length) {
            var count = 0,
                el,
                iPosition,
                elPosition,
                elHeight,
                iHeight,
                elementsArray = WASABIWEB.equalHeights.elementsArray,
                elements = WASABIWEB.equalHeights.elements;
            elements.height('auto');
            
            for (var i=0, x = elementsArray.length; i<x; i++) {
                for (var j=0, k = elementsArray.length; j<k; j++) {
                    var el = elementsArray[j];
                    iPosition = elementsArray[i].offset().top;
                    elPosition = el.offset().top;
                        // grab the top positions of the elements
                    if (count !== i) {
                        // check it's not the current item
                        if (iPosition === elPosition) {
                            // two elements are in the same vertical position.
                            iHeight = elementsArray[i].outerHeight();
                            // set the heights equal to the tallest.
                            elHeight = el.outerHeight();
                            if (iHeight >= elHeight) {
                                el.css({'height' : iHeight});
                            } 
                        }
                    }
                    count ++;
                }
            }
        }
    }
};

PROJECTNAME.equalHeights.init($);

You can hook this too elements by adding the class .js-equal-heights

 

Example using elements in a Bootstrap inspired grid.

<div class="row">
        <div class="col-sm-4 js-equal-height">
            ...
        </div>
        <div class="col-sm-4 js-equal-height">
            ...
        </div>
        <div class="col-sm-4 js-equal-height">
            ...
        </div>
    </row>