Question

I am trying to make an overlay panel slide in and out from the side of the page.
It works with Jquery 1.3, but with nothing after that.
I got it to slide out with 1.6.4, but it won’t slide back in.

I’m totally stumped,
I looked through all the Jquery Changelogs, and couldn’t figure it out.
Hopefully someone can help me,
Thanks.

here is my code…

HTML

<div id="sliderWrap">
    <div id="openCloseIdentifier"></div>
    <div id="slider">
      <div id="sliderContent">
                    </div>
      <div id="openCloseWrap">
            <a href="#" class="topMenuAction" id="topMenuImage">
                <img src="open.png" alt="open" />
            </a>
        </div>
    </div>
</div>

CSS

body {
margin: 0;
font-size:16px;
color: #000000;
font-family:Arial, Helvetica, sans-serif;
height: 100%;
}

#sliderWrap {
position:absolute;
top:0px;
left:0px;
height:100%;
width: auto;
}

#slider {
position: absolute;
background-color:black;
width: 600px;
height: 100%;
margin-left: -550px;
top:0;
left:0;
}

#slider img {
border: 0;
}

#sliderContent {
margin: 50px 0 0 50px;
position: absolute;
text-align:center;
background-color:#FFFFCC;
color:#333333;
font-weight:bold;
padding: 10px;
}

#header {
margin: 0 auto;
width: 600px;
background-color: #F0F0F0;
height: 200px;
padding: 10px;
}

#openCloseWrap {
position:absolute;
margin-top: auto;
margin-right: 0;
margin-bottom: auto;
margin-left: 600px;
}

Javascript

    $(document).ready(function() {
    $(".topMenuAction").click( function() {
        if ($("#openCloseIdentifier").is(":hidden")) {
            $("#slider").animate({ 
                marginLeft: "-550px"
                }, 500 );
            $("#topMenuImage").html('<img src="images/open.png" alt="open" />');
            $("#openCloseIdentifier").show();
        } else {
            $("#slider").animate({ 
                marginLeft: "1px"
                }, 500 );
            $("#topMenuImage").html('<img src="images/close.png" alt="close" />');
            $("#openCloseIdentifier").hide();
        }

    });  
});

Answer 1

Try this method:

$(document).ready(function() {
    $(".topMenuAction").click( function() {
        if ($("#openCloseIdentifier").hasClass("closed")) {
            $("#slider").animate({ 
                marginLeft: "-550px"
                }, 500 );
            $("#topMenuImage").html('<img src="images/open.png" alt="open" />');
            $("#openCloseIdentifier").removeClass("closed");
        } else {
            $("#slider").animate({ 
                marginLeft: "1px"
                }, 500 );
            $("#topMenuImage").html('<img src="images/close.png" alt="close" />');
            $("#openCloseIdentifier").addClass("closed");
        }

    });  
});

I prefer to use hasClass(), removeClass() and addClass() rather than is(":hidden").

This works in the latest version of jquery – check it out.

Forgot to mention

You’ll also need to give your div a class of closed first:

<div id="openCloseIdentifier" class="closed"></div>