Swapping out a div with an image gallery (Javascript)
<p>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 <a href="http://smoothgallery.jondesign.net/" rel="nofollow">Smoothgallery</a>. 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? </p>

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

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

<p>Any help would be much appreciated, thanks.</p>

<p>EDIT</p>

<p>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.</p>

<p>SECOND EDIT</p>

<p>The code I use to show which div to expand:</p>

<pre><code>&lt;span onClick="HideDIV('initDiv');animatedcollapse.show('imgDiv');startGallery();&gt;&lt;img&gt;&lt;/span&gt;
</code></pre>
