It works on jsfiddle but not on my website
<p>i know there are already lots of question about it, but i didn't find my answer.</p>

<p>My code on <a href="http://jsfiddle.net/WBkPH/2/" rel="nofollow">jsFiddle</a> works but when i want to use it on my <a href="http://commu-gamers.fr/" rel="nofollow">website</a>, it doesn't work :s and i don't see what is the problem (not the encoding, the js is load in the body in the too case...)</p>

<p>Two cases : </p>

<p>1 : there is no $(document).ready</p>

<p>Nothing happend in any case.</p>

<p>2 : without the $(document).ready</p>

<p>When you click on "Et c'est reparti !" for example, the first condition is done, but if you click another time, nothing happen, whereas the second condition should be activate :(</p>

<p>The javascript : </p>

<pre><code>function afficherToggle(c){
    if($(c).height()!='20'){
        $(c).stop().animate({ height: '20px',}, 600 );
    }
    else{
        $(c).animateAuto("height", 800); 
    }
}

jQuery.fn.animateAuto = function (prop, speed, callback) {
    var elem, height, width;
    return this.each(function (i, el) {
        el = jQuery(el), elem = el.clone().css({
            'height': 'auto'
        }).appendTo('body');
        height = elem.css('height'),
        elem.remove();

        if (prop === 'height') el.animate({
            "height": height
        }, speed, callback);
    });
}
</code></pre>

<p>Thank for your help !</p>

<p>Ps : Sorry for my English, if something is not clear, i'll try to explain with others words.</p>
