Question

I have a drupal 6.x site and having a problem with jquery.

$(document).ready(function() {
    $('#fbToggle').click(function() {
        if ($('#feedback .title').is(":#780F2C")) {
            $('#feedback').css({
                'padding': '50px 50px 0',
                'left': '100px'
            });
            $('#feedback .title').css({
                'background-color': '#393939'
            });
        } else {
            $('#feedback').css({
                'padding': '0',
                'left': '150px'
            });
            $('#feedback .title').css({
                'background-color': '#780F2C'
            });
        }
        $('#fbInner').animate({
            display: 'toggle',
            height: 'toggle'
        }, 300, function() {
            // Animation complete.
        });
    });
});

I have an animate effect trigger on a click event for a div, but when the animation completes, it closes instead of staying open; the display toggles none -> block -> none with one click.

I have all the code (HTML, CSS, Script) on JSFiddle http://jsfiddle.net/N3wkT/7/

Thanks

Answer 1

display attribute is not animatable, so div’s height increases, and at the end of animation, display changes from block to none. removeing display from animate solves the problem.

http://jsfiddle.net/N3wkT/8/

Also better to use slideDown for sliding effects