Question

quick question. im trying to animate a few things with jquery and although its working, this is the problem im having.

well first heres the code:

$(document).ready( function(e){

    // vars
    var question = $('#faqQues');
    var answer = $('#faqAns');  
    var ansCont = $('#faqAnsCont');


    question.click(function(){
         if (answer.css("display") != "none") {
             answer.animate({'height':0}, 500, hmm);

             function hmm() {
                 answer.css("display","none");  
             } 
         } else {
             answer.css("display","block");
             answer.animate({"height":'100'},500);  
         }
    });
});

essentially all i want to do be able to click something and it animate its height(up down).
the problem comes in on this code block

else {
    answer.css("display","block");
    answer.animate({"height":'100'},500);               
}

specifically on this line

{"height":'100'}

what i want to happen is that it animates back to the divs default height. I dont want to
add a number (like the 100 above) height because the divs inner content is always going to change hence the dynamic height but if i remove the height, it breaks. Ive tried a few other things including something like maybe

.animate({"height":'**divNameHere**.height()'},500);

but although it dont get errors, it doesnt work either lol.

So here i am asking for help. what changes do i need to make to this so that it animates back to whatever that divs height is without directly putting in a number?

Any Tips, code, links etc i’ll gladly appreciate

Answer 1

Why don’t you use the slideUp() and slideDown() methods which do exactly what you want ?

Or better yet slideToggle() which handles both ways automatically ?

$(document).ready(function(e) {
    // vars
    var question = $('#faqQues');
    var answer = $('#faqAns');
    var ansCont = $('#faqAnsCont');

    question.click(function() {
        answer.slideToggle(500);
    });
});

Demo at http://jsfiddle.net/5wBeu/

That is all you need..