Question

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.

<div class="slidePanelItem">       
<a href="#slidePanelWrapper" class="slidePanelLink"><img src="/images/temp/gscookiesFPO.png" alt="gscookiesFPO" /></a>
<div class="slidePanel"><img src="/images/temp/gscookiescontentFPO.gif" alt="gscookiescontentFPO"/></div>
</div>

<div class="slidePanelItem">       
<a href="#slidePanelWrapper" class="slidePanelLink"><img src="/images/temp/gscookiesFPO.png" alt="gscookiesFPO" /></a>
<div class="slidePanel"><img src="/images/temp/gscookiescontentFPO.gif" alt="gscookiescontentFPO"/></div>
</div>

Here is the jQuery I’m using:

$(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");             
});
});         
});

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.

I can’t figure out how to get this working properly. Any help would be appreciated!

Answer 1

try this..

$(document).ready(function () {

    $(".slidePanelItem .slidePanelLink").click(function () {
        var slidePanelItem = $(this).closest('.slidePanelItem');
        if (slidePanelItem.is(".open")) {
            slidePanelItem.animate({
                bottom: "-150px"
            }, 1000).toggleClass("open");
        } else {
            slidePanelItem.animate({
                bottom: "0px"
            }, 1000).toggleClass("open");
        }
    });

});

or another way…

$(document).ready(function () {

    $(".slidePanelItem .slidePanelLink").click(function () {
        $(this).closest('.slidePanelItem').animate({
            bottom: (slidePanelItem.is(".open"))?"-150px":"0"
        }, 1000, function(){
           $(this).toggleClass("open");
        });
    });

});