title: Need to change the positioning of a series of elements on a page
body: <p>I have the 2 divs on a page which I need to animate up (a sliding panel effect). I have each element starting with a bottom position of 0. I need to have a link which causes the div to animate upward to bottom: 200px; Here is the HTML.</p>
  
  <pre><code>&lt;div class="slidePanelItem"&gt;       
  &lt;a href="#slidePanelWrapper" class="slidePanelLink"&gt;&lt;img src="/images/temp/gscookiesFPO.png" alt="gscookiesFPO" /&gt;&lt;/a&gt;
  &lt;div class="slidePanel"&gt;&lt;img src="/images/temp/gscookiescontentFPO.gif" alt="gscookiescontentFPO"/&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="slidePanelItem"&gt;       
  &lt;a href="#slidePanelWrapper" class="slidePanelLink"&gt;&lt;img src="/images/temp/gscookiesFPO.png" alt="gscookiesFPO" /&gt;&lt;/a&gt;
  &lt;div class="slidePanel"&gt;&lt;img src="/images/temp/gscookiescontentFPO.gif" alt="gscookiescontentFPO"/&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the jQuery I'm using:</p>
  
  <pre><code>$(document).ready(function(){
  $(".slidePanelItem").each(function(){
  $(".slidePanelLink").click(function(){
  if($('.slidePanelItem').hasClass("open"))
  $(this).find('.slidePanelItem').animate({bottom: "-150px"}, 1000).toggleClass("open");
  else
  $(this).find('.slidePanelItem').animate({bottom: "0px"}, 1000).toggleClass("open");             
  });
  });         
  });
  </code></pre>
  
  <p>I'm trying to target each div with a class of "slidePanelItem". When the link is clicked, I want to check to see if there is a class of "open" on .slidePanelItem. If there is not, the the div animates to show all the content, and the class .open is added. If there is a class of .open, then the div animates closed.</p>
  
  <p>I can't figure out how to get this working properly. Any help would be appreciated!</p>