JQuery .animate trouble

[dzhax]

Hello everyone! Working on animating my page with some jquery .animate and having some trouble. I have the following script to "collapse" a menu and load new content to the <td> however I am having difficulty expanding the <td> after the new content has completed loading.

<script type="text/javascript">     function loadNav(received){          if(received.parentNode.className != "selected"){               $('#header').animate({height: "-=95px"}, {                    duration: 350,complete: function() {                         var elems = document.getElementsByTagName('*'), i;                         for (i in elems) {                              if((elems[i].className).indexOf('menu')> -1) {                                   var child_span = elems[i].getElementsByTagName("td");                                   for(i=0;i<child_span.length;i++){                                        child_span[i].className="";                                   }                                   child_span[0].className ="file";                                   received.parentNode.className="selected";                                   document.getElementById('menuBody').innerHTML = "<td colspan=10><div>"+received.innerText+"</div></td>";                                   expandMenu();                              }                         }                    }               });          }           }     function expandMenu(){          $('#header').animate({height: "+=95px"}, 'slow');     }</script>

it works just fine collapsing the div but it will not open back up. Also I get the following error in the console Uncaught TypeError: Cannot call method 'indexOf' of undefined and its pointing to this line:

if((elems[i].className).indexOf('menu')> -1) {

However the first half of the animation is completing and the className's are updating like normal. Any help on this is much appreciated.

[justsomeguy]

Don't use for (i in elems) when you're working with arrays, for..in is for objects. It will return things like properties also, including the length property of arrays. So at one point i is set to length, so you're trying to get elems.length.className, which obviously doesn't exist. Use a regular for loop for arrays.

[dzhax]

thanks for that. I am now using

 for (i=0; i < elems.length; i++) {

and the error is no longer showing in the console. however the div is still not expanding. Nevermind I fixed it. I added a break after calling expandMenu();

Edited April 12, 2013 by dzhax