Альтернатива jquery Masonry со многими элементами списка

Question

У меня большой неупорядоченный список, каждый из которых содержит изображение и заголовок. При щелчке по заголовку открывается область содержимого. По умолчанию все области содержимого свернуты, поэтому каждый элемент списка имеет одинаковую высоту. Вы можете просмотреть рабочий пример здесь: http://trendsprintmedia.com/templates/

Jquery прост:

$(".tempContainer").hide();
$("h2.trigger").click(function(){
    $(this).toggleClass("activeTemp").next().slideToggle(250);
return false; 
});

Когда вы раскроете контент (нажав на заголовок или значок плюса), вы увидите, что весь контент сползает вниз. Это испортит все элементы списка ниже. Весь список ниже становится неорганизованным, и ... ну, ужасно. Я хочу избежать этого.

Поскольку каждый элемент (li.singleTemp) имеет одинаковую ширину, я ищу решение jquery, чтобы при щелчке по заголовку только этот вертикальный столбец элементов списка скользил вниз, а остальные элементы оставались на месте. Есть идеи?

В качестве альтернативы, если вы развернете список, было бы здорово, если бы следующая строка полностью опустилась.

Answer 1

Я бы дал вашему <div id="templates"> абсолютную позицию и установил бы z-индекс выше, чем остальные элементы.

$("h2.trigger").click(function(){
           $(this).toggleClass("activeTemp").next().slideToggle(250)
              .parent('div#templates')
              .css({position: 'absolute', z-index: '3', top: '155'});
    return false; 
});