How To Set 'auto' Height In Jquery Animate

Problem: I've a box(div) with fixed width but unknown (auto) height. I need to open/close that box using JQuery animate function. Problem is (commented in code too) on Open event,

Solution 1:

Have you tried slideDown and slideUp ? :

$(document).ready(function(){
    $("#open").click(function(){
        $("#textselector-body").slideDown(2000);
    });
    $("#close").click(function(){
        $("#textselector-body").slideUp(2000);
    });
});​

jsFiddle: http://jsfiddle.net/7m5Qa/2/

Solution 2:

Have you tried height:'toggle' ? (JQuery.animate())

It'll reverse the transformation anytime you click on the button though, but if you want only one button, it's the solution.

DEMO.

Solution 3:

You can instead use the .slideUp and .slideDown methods with jQuery:

$("#open").click(function(){
        $("#textselector-body").slideDown('slow')
});

    $("#close").click(function(){
        $("#textselector-body").slideUp('slow')
});

http://jsfiddle.net/Kyle_Sevenoaks/7m5Qa/3/

Solution 4:

$(document).ready(function(){
    var H = $("#textselector-body").height();
    $("#open").click(function(){
        $("#textselector-body").animate({
            height:'100px'
        },2000);
    });
    $("#close").click(function(){
        $("#textselector-body").animate({
            height:H
        },2000);
    });
});​

FIDDLE

EDIT:

Not sure I got the question right? If you're just trying to toggle it you can do:

$(function(){
    $("#open, #close").click(function(e){
        $("#textselector-body")[e.target.id=='open'?'slideDown':'slideUp'](2000);
    });
});​

FIDDLE