jQuery.fn.animateAuto = function(prop, speed, callback){
    var beginCache, endCache;

    prop = prop || 'both';
    speed = speed !== null ? 200 : speed;
    callback = callback || function() {};

    return this.each(function(i, el){
        el = jQuery(el);

    // store current height/width dimensions
    beginCache = {width: el.css("width"), height: el.css("height")};

    // set to auto and store width/height dimensions
    el.css('width', 'auto');
    el.css('height', 'auto');
    endCache = {width: el.css('width'), height: el.css('height')};

    // revert back to original dimensions
        el.css(beginCache);

        // animate to auto
        if(prop === "height")
            el.animate({"height":endCache.height}, speed, callback);
        else if(prop === "width")
            el.animate({"width":endCache.width}, speed, callback);  
        else if(prop === "both")
            el.animate(endCache, speed, callback);
    });  
};

does it mean i am a good coder or you are not good like me :)

thanks

Love you now.

Steve , you are so awesome!

Hi,

Why clone the element to get height, would it not be simpler (and faster?) to temporarily position (and show) the element way out left in it’s relatively positioned parent? For example by adding a class like this to the element:

.expandMe{
 position:absolute;
 left:-9999px;
 display:block;
}

Wow Steve, you just made my day! I can’t believe I’ve never heard of this method, it works perfectly. Thanks!

However, when the height is small, the animation will have a serious delay. Knowing what the height is makes the animation more consistent.

Love it – thanks, Steve!

Here’s some simple jQuery I used with max-width to display a menu in a div with onclick. Keep in mind that any padding on the element you’re adjusting will cause that much of the element to show. Which for my purposes was good (it allowed the ‘«’ and ‘»’ you see in my code to display, which is what the user is clicking to show/hide the menu) but if you don’t want that then be sure to add some extra coding to add/remove your padding.

function toggleHorizontal(hidden_id, click_id){
    if($('#'+hidden_id).css('max-width') == "0px"){
        $("#"+hidden_id).animate({"max-width":"350px"}, 300);
        $("#"+click_id).html('»');
    }else{
        $('#'+hidden_id).animate({"max-width":"0px"}, 300);
        $("#"+click_id).html('«');
    }
}

Then just set the div to max-width: 0px; initially, apply onclick="toggleHorizontal('hidden_id', 'click_id')" and bazinga! Hopefully someone finds this as helpful as I found Steve’s suggestion.

https://github.com/davidtheclark/jquery.animateAuto

I believe I’ve incorporated the ideas people have shared above, as well as my own — and I’m hoping others want to contribute to developing a totally solid, reliable, and reusable solution. Let’s pool efforts.

A paragraph is a block element.

Had to comment on the EASY approach! Thank you so much!