Force sibling columns with .equal-height class to size to the largest height of the group.

equalheight.js

$.fn.equalheight = function(){
	var $selection = this;
	var $groups = [];
	while( $selection.length > 1 ){// If $selection.length is greater than 1, then it must be 2, meaning there are at least 2 equal-height divs left. This will prevent an infinite loop if there is an equal-height div without a partner equal-height div.
		// Find an equal-height group.
		$groups.push( $selection.eq(0).siblings('.equal-height').addBack() );
		// Reduce selection by the latest equal-height group.
		$selection = $selection.not( $groups[ $groups.length - 1 ] );

		// Drop groups that only have 1 element - it doesn't make any sense to have a lone equal-height element.
		if( $groups[ $groups.length - 1 ].length < 2 ){
		// If the last group only has 1 element...
			// Remove the last element.
			$groups.pop();
		}
	}

	// The groups have been put into the $groups array. Time to make them equal height.
	for( var i = 0; i < $groups.length; i++ ){
		var highest_px = 0;
		for( var j = 0; j < $groups[i].length; j++ ){
			if( $groups[i].eq(j).innerHeight() > highest_px ){
				highest_px = $groups[i].eq(j).innerHeight();
			}
		}
		for( var j = 0; j < $groups[i].length; j++ ){
			$groups[i].eq(j).height( highest_px );
		}
	}
};

$(window).load(function() {
	$('.equal-height').equalheight();
});


$(window).resize(function(){
	$('.equal-height').equalheight();
});

This just worked great for the Treasurer's website. 6-8-2016