Question

$('.button').click(function() {
    $('#small-form').animate({
        width: ['toggle', 'swing'],
        height: ['toggle', 'swing'],
        opacity: 'toggle'
    }, 5000, 'linear');
    $('#big-form').animate({
        width: ['toggle', 'swing'],
        height: ['toggle', 'swing'],
        opacity: 'toggle'
    }, 5000, 'linear');
});

… this HIDEs both the elements, I want to hide small and show the big form.

Thanks!

Answer 1

with you codes, it depends. if both forms are visible, then both are shown. Toggle means do the opposite, – if it’s hidden, show it – if its height is greater than 0, make it 0.

suggestions:

1.) your code can be simplified to.

$('.button').click(function() {
    $('#small-form, #big-form').animate({
        width: ['toggle', 'swing'],
        height: ['toggle', 'swing'],
        opacity: 'toggle'
    }, 5000, 'linear');
});

2.) try hiding one of it first. Something like $('#small-form').hide()