Animate the change of height in a div on click of another div

Question

I have searched this all over Stack Overflow, found many answers, but none work with what I am specifically going for... basically I have no idea why this code does not work someone please help! Any input much appreciated, thanks!

Here is the HTML with the div to click with an id of elementTop and the div to be shown with animated height is elementBottom

<div id="elementTop" onclick="toggle_visibility('elementBottom');" >
    <img id="thumb" src="images/davey1.png" />
    <a>davey blair</a>
</div>

<div id="elementBottom">
    <p><span style="font-weight: bold;">age: </span>29</p>
    <p><span style="font-weight: bold;">hometown: </span>Charleston,SC</p>
    <p><span style="font-weight: bold;">regular or goofy: </span>Regular</p>                                                   
    <p><span style="font-weight: bold;">years shredding: </span>lifetime</p>
    <p><span style="font-weight: bold;">other sponsors: </span>naish, chucktown</p>
    <p><span style="font-weight: bold;">favorite trick: </span>switch mobe</p>
    <p><span style="font-weight: bold;">favorite place to shred: </span>with my homies</p>
    <p><span style="font-weight: bold;">music preference: </span>all music</p>
    <p><span style="font-weight: bold;">paper or plastic: </span>hands</p>
    <p><span style="font-weight: bold;">cat or dog: </span>dogs</p>
    <p><span style="font-weight: bold;">other hobbies: </span>living life. work to live never live to work, live life.</p>
</div>

And here is the JavaScript/jQuery I am using and the JavaScript lines I commented out work, however the jQuery that is not commented does not work.

function toggle_visibility(id) {
  var e = document.getElementById(id);
  if(e.style.height == 'auto') {
    // e.style.height = '0px';
    $('#' + e).animate({height:'0px'});
  } else {
    // e.style.height = 'auto';
    $('#' + e).animate({height:'auto'});
  }
}

Answer 1

This works, but you can never animated it back because you can't click on the element when it's 0px high:

http://jsfiddle.net/neuroflux/UYZY2/23/

SNIP!

function toggle_visibility(id) {
    $(id).stop().animate({height:'toggle'}, 500);
}

$('.clicker').on('click', function() {
   toggle_visibility('#' + $(this).attr('name'));
});

Answer 2

It's a little odd that you're using jQuery and sometimes not. Use

var e = $('#' + id);

to get the Dom element you want to manipulate. Then you can just do

e.animate();