Swapping out a div with an image gallery (Javascript)

Question

What I have at the moment is a preview window that, when clicked on, hides to show a div containing an image gallery. However, it is an instant change over and i would prefer it to be smooth. The image gallery is the Smoothgallery. I have found a way to smoothly expand the div but this breaks the gallery. Since the gallery is based around Mootools would someone be able to show me a method of smoothly expanding a div whilst leaving the image gallery intact utilizing mootools?

<div id="initDiv"> 
 <?php if (has_thumbnail_image($post)) : ?>
  <div onClick="HideDIV('initDiv');animatedcollapse.show('mainDiv');startGallery();"><?php echo thumbnail_image_overlay($post, 580); ?></div>
 <? else: ?>
  <img src='http://localhost:8888/Bionic/bionic-wordpress/bionic-dev/wp-content/themes/bionic/images/black.jpg'&gt;
 <?php endif; ?>
</div>

<div id="mainDiv" style="display:none;">
 <script type="text/javascript">
  function startGallery() {
   var myGallery = new gallery($('myGallery'), {
    timed: false,
    defaultTransition: "fadeslideleft"
   });
  }
  //window.onDomReady(startGallery);
 </script>
 <div id="myGallery">
 <?php echo all_images($post); ?>
 </div>
</div>

Any help would be much appreciated, thanks.

EDIT

When I expand the gallery i get this error in firebug: element.getElements is not a function (jd.gallery.js (line 147)). I take out the smooth expanding and it goes away.

SECOND EDIT

The code I use to show which div to expand:

<span onClick="HideDIV('initDiv');animatedcollapse.show('imgDiv');startGallery();><img></span>

Answer 1

The error indicates that the JS library couldn't install its hooks into the DIV (getElements() is not a standard function of an HTML element). How do you get a pointer to the DIV? document.getElementByID()? Or are you using the element lookup function of your JS library?