Алексей

фидлер и кодпен у меня глючат почему-то, попробуй мой топорный вариант:

<div class="checkbox" >
	<input type="checkbox" id="all" onclick="showAll();"><label for="all">Показать все</label>
	<input type="checkbox" id="one" onclick="hideBox();"><label for="one">Показать one</label>
	<input type="checkbox" id="two" onclick="hideBox();"><label for="two">Показать two</label>
	<input type="checkbox" id="three" onclick="hideBox();"><label for="three">Показать three</label>
</div>
<div class="blocks">
    <div class="one">текст блока one</div>
    <div class="two">текст блока two</div>
    <div class="three">текст блока three</div>
</div>

function showAll () {
$('.blocks div').css('display','block');
$('.checkbox input').attr('checked', false);
$('#all').prop('checked', true);
};

function hideBox() {
$('#all').attr('checked', false);
$( ".blocks div" ).each(function(i) {
    var className = $(this).attr("class"); 
    var idBox = $('#'+className).prop("checked");
    if (!idBox) {
      $(this).css('display','none');
    } else {
      $(this).css('display','block');
    };
});
};

Я бы предложил использовать джаваскрипт, отлавливаешь высоту всех блоков и задаешь всем по максимальной и делаешь например FadeIn их. Так же сделать отступ слева у заголовка, чтобы при переносе слова, оно было на одном вертикальном уровне с заглавной буквой. Кнопку "Смотреть подробнее" пришпандориваешь к нижней части блока, чтобы они все были на одном горизонтальном уровне вне зависимости от высоты.

Если все заголовки уже придуманы и они влезают целиком или по словам, то ок, если же нет, то я бы посоветовал их продумать, т.к. длинное слово может просто не влезть и придется либо менять шрифт, либо растягивать сами блоки.

Есть еще вариант, перенести заголовок над картинкой в диве с фиксированной высотой в которую гарантированно влезут все заголовки и у всех блоков будет одинаковый футер ввиде картинка+ссылка(смотреть подробнее).