Question

Is there a way to do this with jQuery

$(this).toggle(
    "slide", 
    {
        direction: 'up',
        duration: 'slow',
        easing: 'easeOutQuart'
    }
);

but not have it “block” out the space first? As it stands I have a list of elements, and if you click a name it expands a section vertically. Unfortunately, it first kicks open a large block of empty space to make room for the animation.

Is there a way to do this animation where the box grows as the content grows, similar to “blind”?

– –

Here is an example of the structure, however it doesn’t utilize the slide animation, but the blind animation.

Answer 1

I have slightly changed the JavaScript of the example. Now the content slides out the right way…

$('.trials h4').bind(
    'click', 
    function() {  
            $(this).parents(".trials").children(".trial_container").slideToggle('slow');
               return false;
});