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'});
  }
}

[This post](http://stackoverflow.com/questions/5003220/javascript-jquery-animate-to-auto-height) may be useful — Zach Saucier, Aug 13 '13 at 15:28

Barrie Reader · Accepted Answer · 2013-08-13T15:42:07.133

5

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'));
});

edited Aug 13 '13 at 15:42

answered Aug 13 '13 at 15:30

Barrie Reader

10,647
11
71
139

I like that a lot! and that is awesome it works I will try to use your ideas in my problem, but specifically what I am going for is for the user to click the div elementTop and have the elementBottom toggle hidden and shown by animating height – swiper192 Aug 13 '13 at 15:36
1

You could also change the height property to `toggle` instead of pixels. Shortens the code: http://jsfiddle.net/876R9/ – Novocaine Aug 13 '13 at 15:39
Updated again with @Novocaine88 suggestion ;) – Barrie Reader Aug 13 '13 at 15:40
Cheers @swiper192! Note that I changed my JSFiddle to include `THE OLLIE` ;) – Barrie Reader Aug 13 '13 at 15:43

score 1 · Answer 2 · answered Aug 13 '13 at 15:32

1

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();

answered Aug 13 '13 at 15:32

Brett

2,775
4
27
32

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

2 Answers2