Need to change the positioning of a series of elements on a page
<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>
