Question

This is a snippet within a toggle() function. I have a header that when clicked, makes the headers below slide down creating space for the clicked headers content to fade in.

There works fine but I am having a problem with the header at the bottom of the stack. There isn’t a header below it to move down so the following function which fades the contents in, doesn’t fire.

I want to keep the general structure of the headers sliding down THEN the fade in function is fired.

$(currentHeader).next('li.header')
        .animate({ marginTop: itemHeight + 15 }, 1000, function ()
        {
            $(this).prev('ul#work-headers li').find('ul').fadeIn(500);
        });

Any help would be much appreciated.

Answer 1

I would say there are 2 solutions to this:

The quick and dirty:

Add an empty LI-tag:

<li class="header" style="display:none;"></li>

Or change the code to code to add the margin to either the UL’s or some div after each LI & UL pair.