Равная высота столбца на скрытых элементах

Question

У меня есть 2 столбца (слева и справа), что я хочу равных столбцов. Используемый ниже код делает это отлично. Тем не менее, в столбце слева у меня есть скрытый текст/абзацы, которые можно увидеть, нажав кнопку, которая затем откроет скрытый контент. Код, который я использую, не учитывает дополнительную высоту, он просто перекрывается.

Какую модификацию кода следует внести для учета дополнительной высоты при обнаружении скрытого содержимого?

HTML:

<div class="container"> 

    <div class="blocks left"> 
     <button>Show</button> 

     <div class="hidden-content"> 
      Yup! 
     </div> 
    </div> 
    <div class="blocks right"></div> 
</div> 

JS:

function setEqualHeight(columns) { 
    var tallestcolumn = 0; 
    columns.each(function() { 
     currentHeight = $(this).height(); 
     if (currentHeight > tallestcolumn) { 
      tallestcolumn = currentHeight; 
     } 
    }); 
    columns.height(tallestcolumn); 
} 

setEqualHeight($('.blocks')); 

Answer 1

Перед выявления/скрытия содержание сбросить высоту, которая была добавлена ​​в контейнер .blocks в `Авто». Раньше высота фиксировалась (при первоначальном расчете), поэтому любое добавленное содержимое перекрывалось бы.

JS

//on click of the button 
$('button').on('click', function() { 
    $('.blocks').css("height", "auto"); 
    $('.hidden-content').show(); 
    setEqualHeight($('.blocks')); 
}); 

Fiddle