Sliding larger image UNDER Thumbnail
<p>I am having trouble using the .slidetoggle function, the actual sliding works, but not in relation to the entire page. </p>

<p>My webpage is organized on a set of thumbnails in a grid organization, when you click a thumbnail, a larger image will slide down, thus pushing the other thumbnails. But when I click on the thumbnail, the larger image will slide down, but it does NOT push down the thumbnails underneath, it goes behind them.  </p>

<p><a href="http://www.michaelnagy.at/" rel="nofollow">Here is an example of a web page that has very similar functionality</a> characteristic that I am looking for. </p>

<p>I am still new to Jquery so there are a lot of functions that I still need to learn. I searched for 2 days so far, but to no avail. I noticed that some people may use SlideUp and SlideDown functions, while others will put in the "var" and "if", but this is all over my head, someone please help!</p>

<p>Here is the jsBIN. <a href="http://jsbin.com/ovodeb/3/edit" rel="nofollow">http://jsbin.com/ovodeb/3/edit</a></p>

<pre><code>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;

 $(document).ready(function() {
 $('div.item').animate({
 opacity:1

  });

 $('div.item').hover(function(){

 $(this).find('div.capt').stop(false,true).fadeIn(600); 

 }, function(){

 $(this).find('div.capt').stop(false,true).fadeOut(600);

 });
 $('div.item').click(function() {
  $('div.boxdown').slideToggle('slow', function() {

  });

 return true;
    });
  }); 
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;body background="../PORTFOLIO 2012/1.jpg"&gt;
 &lt;div class="wrapper"&gt;
   &lt;div class="item"&gt;  
     &lt;img src="SitePhotosTest/13.jpg" width="200" height="200"&gt;
     &lt;div class="capt"&gt;
        &lt;p class="what"&gt;Womb&lt;/p&gt;
        &lt;p&gt;Installation&lt;/p&gt;
       &lt;/div&gt;

 &lt;div class="boxdown"&gt;
 &lt;img src="SitePhotosTest/ADBalanc.jpg" width="200" height="200"&gt;
&lt;/div&gt;

&lt;/div&gt;

 &lt;div class="item"&gt;
 &lt;a&gt;&lt;img src="SitePhotosTest/13.jpg" width="200" height="200"&gt;&lt;/a&gt;
 &lt;div class="capt"&gt;
     &lt;p&gt;Hi&lt;/p&gt;
    &lt;/div&gt;
 &lt;/div&gt;
 &lt;div class="item"&gt;
 &lt;a&gt;&lt;img src="SitePhotosTest/13.jpg" width="200" height="200"&gt;&lt;/a&gt;
 &lt;div class="capt"&gt;
     &lt;p&gt;Hi&lt;/p&gt;
      &lt;/div&gt;
 &lt;/div&gt;

 &lt;div class="item"&gt;
 &lt;a&gt;&lt;img src="SitePhotosTest/13.jpg" width="200" height="200"&gt;&lt;/a&gt;
 &lt;div class="capt"&gt;
     &lt;p&gt;Hi&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;
</code></pre>
