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 (mented in code too) on Open event, I need to set auto height, which I'm not able to do. Can someone please help set height to auto?

JSFiddle: / Code also given below:

HTML

<button id="open">open</button>
<button id="close">close</button>
<div id="textselector-body">
    a<br/>
    b<br/>
    c<br/>
</div>​

Java Script

$(document).ready(function(){
    $("#open").click(function(){
        $("#textselector-body").animate({
            height:'100px' //here is problem. I need it 'auto'.
        },2000);
    });
    $("#close").click(function(){
        $("#textselector-body").animate({
            height:'0'
        },2000);
    });
});​

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 (mented in code too) on Open event, I need to set auto height, which I'm not able to do. Can someone please help set height to auto?

JSFiddle: http://jsfiddle/7m5Qa/ Code also given below:

HTML

<button id="open">open</button>
<button id="close">close</button>
<div id="textselector-body">
    a<br/>
    b<br/>
    c<br/>
</div>​

Java Script

$(document).ready(function(){
    $("#open").click(function(){
        $("#textselector-body").animate({
            height:'100px' //here is problem. I need it 'auto'.
        },2000);
    });
    $("#close").click(function(){
        $("#textselector-body").animate({
            height:'0'
        },2000);
    });
});​

• javascript
• jquery
• html
• css

4 Answers 4

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/7m5Qa/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.

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/Kyle_Sevenoaks/7m5Qa/3/

$(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