Toggle height of div size issue

Question

I'm using the following code to toggle the size of a div:

var position = 'expanded';
var curHeight = $('.login-div').height();
$(".login-header").click(function() {
    if (position == 'expanded') {
        $('.login-div').animate({
            height: '3.2vw'
        });
        position = 'collapsed';
    } else {
        $('.login-div').animate({
            height: curHeight
        });
        position = 'expanded';
    }
});

My initial div height have no default size.Its height depends on content.So i'm trying to get the height of the div and use it at my second click,to change it's size back to normal.But somehow it doesn't take the correct height.My initial div has 260 px height,but the height() says it has only 238 px ...

Answer 1

I've created a little example. Not sure exactly what you meant with your question. Does this illustrate what you wanted to do?

 var positionExpanded,
     curHeight = $('.login-div').outerHeight();

$(".login-header").click(function() {
    if (positionExpanded) {
        $('.login-div').animate({
            height: '32vw'
        });
        positionExpanded = false;
    } else {
        $('.login-div').animate({
            height: curHeight
        });
        positionExpanded = true;
    }
});

Working demo here: http://jsbin.com/jivezilula/4/edit?html,css,js,output

Answer 2

If your element has a border or margin set on it in CSS and you wish to include those in the height value, use outerHeight()

var curHeight = $('.login-div').outerHeight();

Answer 3

var position = 'expanded';
var curHeight = $('.login-div').height();
$(".login-header").click(function() {
    if (position == 'expanded') {
        $('.login-div').animate({
            height: '3.2vw'
        });
        position = 'collapsed';
    } else {
        $('.login-div').animate({
            height: curHeight
        });
        position = 'expanded';
    }
});