equal height columns

by ataylor

HTML

<h2>Equal height Columns</h2>
<div class="columnContainer">

    <div> 
      <h4>Column 1 </h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium dui ac lectus faucibus et suscipit ante molestie. Integer velit elit, molestie sed varius in, vestibulum quis mi. In temlerisque interdum consectetur. Maecenas faucibus libero arcu, quis gravida diam. Mauris at nisl ut sem porttitor posuere. Aenean sit amet ligula diam, in feugiat tortor. Maecenas auctnatis. </p>
      <a class="showLink" href="#">Show the hiding content</a>
      <span style="display:none" >
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium dui ac lectus faucibus et suscipit ante molestie. Integer velit elit, molestie sed varius </p>
      <p>in, vestibulum quis mi. In temlerisque interdum consectetur. Maecenas faucibus libero arcu, quis gravida diam. Mauris at nisl ut sem porttitor posuere. Aenean sit amet ligula diam, in feugiat tortor. Maecenas auctnatis.
      </p>
      </span>
  </div>
    <div> 
      <h4>Column 2</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium dui ac lectus faucibus et suscipit ante molestie. Integer velit elit, molestie sed varius in, vestibulum quis mi. In temErum quis. Lorem ipsum dolor sit amet.</p>
    </div>
  <div> 
    <h4>Column 3</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium dui ac lectus faucibus et suscipit ante molestie. Integer velit elit, molestie sed varius in, vestibulum quis mi. In tempor diam id arcu aliquam at porttitor lacus viverra. Quisque justo nisi, co</p>

      <p>dolor aliquam sollicitudin eu a nulla. Suspendisse nec turpis eget dolor sagittis accumsan. Sed luctus ultrices odio vel venenatis. </p>
    </div>
    <div> 
      <h4>Column 4</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium dui ac lectus faucibus et suscipit ante molestie. Integer velit elit, molestie sed...

CSS

h2{width:70%; padding:2% 5%; margin:0 auto;  font-size:14px;}
.columnContainer{ width:70%; padding:2% 5%; overflow:hidden; margin: 10px auto; background:#ececec;}
.columnContainer>div{ width:19%; margin: 0 2% 0 0;  padding:2%; float:left; background:#fff;  box-shadow: 1px 1px 5px #888; font-size:11px; color:#676767;}

JavaScript

$(document).ready( function(){
    function equalHeight(obj){
        var heightArray = obj.children("div").map( function(){
                 return  $(this).height();
                 }).get();
        var maxHeight = Math.max.apply( Math, heightArray);
        obj.children("div").height(maxHeight);
            }
            
    $(".columnContainer").each( function(){
                equalHeight( $(this));
                                           })
    
    $("a.showLink").click(function(){
            $(this).parents().children("span").toggle();
            $(this).parents(".columnContainer").children().removeAttr("style");    
            equalHeight( $(this).parents("div"));            
            });
                         })