Question

It sounds like such a easy task but I am finding this very hard to get this working correctly due to images loading after the script and hidden children. I keep getting different heights each time I load the page.

http://jsfiddle.net/ek5Uf/

$("h2").click(function(){
    var $wrap = $(this).parents(".wrapper");
    $wrap.find(".scroller").height(function(){
        var height = 0;            
        $wrap.find(".scroller > li:lt(3)").each(function(){
            height += $(this).outerHeight(true);
        });
        return height;
    }).slideDown();
});

$("h2").eq(0).click();

Answer 1

Not very elegant, but this should be a sturdy solution for setting the scroller’s height to the height of its first 3 li items:

$("h2").click(function(){
    var $wrap = $(this).closest(".wrapper");
    $wrap.find(".scroller").height(function() {
        var lis = $("> li:gt(2)", this).detach(),
            ret = $(this).outerHeight(true);
        $(this).append(lis);
        return ret;
    }).slideDown();
});

Fiddle
I’ve edited your fiddle slightly to give different sizes to the images for better testing.

I tried making a solution with .position() but it gave weird results, so detach the lis > 2, get the .scroller‘s outerHeight with solely the first 3 lis and reattach the detached lis is the best solution I can imagine.