Question

I am having trouble getting jQuery animate to work .To start the div is hidden with .hide(), then onclick of a button I want to expand the height of the div. Toggle animate works perfect, but I don’t want toggle.

Toggle does this: The div is hidden, I fire the code below, works perfect, then the div gets hidden, fire it again- the div pops up full height and the animates down to 0px. I want it to go from hidden to expanding every time.

$('#logincontainer').animate(
    { 'height':  'toggle' }, 'slow'
);

I tried

{ 'height':  '552px' }, 'slow'
{ 'height':  'auto' }, 'slow'

var h = document.getElementById('logincontainer').scrollHeight;
{ 'height':  h + 'px' }, 'slow'

I just want to expand the height to 552px, which the div already is every time.

Answer 1

you can try slideToggle():

Display or hide the matched elements with a sliding motion.

$('#trigger').click(function(e){
    e.preventDefault()
    $('#logincontainer').slideToggle('slow');
})

DEMO