Question

I have a large unordered list, each containing a picture and a title. When the title is clicked, a content area reveals itself. By default, all of the content areas are collapsed, so each list item has the same height. You can view a working example here: http://trendsprintmedia.com/templates/

The Jquery is simple:

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

When you expand the content (by clicking on the title or plus icon), you will see all of the content slide down. This screws up all of the list items below it. The entire list below it becomes unorganized, and..well, ugly. I want to avoid this.

Because each element (li.singleTemp) is the same width, I am looking for a jquery solution that when the title is clicked, just that vertical column of list items slide down, and the rest of the elements stay in place. Any ideas?

Alternatively, if you expand a list, it would be great if the next row would slide down entirely.

Answer 1

i would give your <div id="templates"> a position of absolute and set the z-index higher than the rest of the elements.

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