Add condition to Animate function

[nadazoulou]

Hi all , im a newbie to jquery and tried hard to write bits of code...My problem is I have a panel with absolute position left set to 0 in default and I want to hide in by sliding it to the left..so as used the animate funstion lije this:


<script type="text/javascript">
$(document).ready(function() {

$("#panel-tab").click(function(e) {

e.preventDefault();
$("#panel").animate({"left":"-856px"}, "slow");

});
});
</script>

MY CSS:
#panel {
width: 864px;
height: 369px;
position: absolute;
top: 195px;
left: 0px;
z-index: 200;
background:url('../images/bg_panel.png') no-repeat;
padding:20px 0 0 18px;
text-align:left;
}
#panel-tab {
width: 21px;
height: 371px;
position: absolute;
top: 9px;
left: 856px;
background:url(../images/panel-arrw-show.png) no-repeat;
text-decoration: none;
color: #FFFFFF;
text-indent:-999999px;
}




It work well but not I must figured out how to make a check or if statement to bring back the panel to default position when clicked again.

Any help on how to do that please?

//Sam

[SB65]

I'd do it like this:

$("#panel-tab").click(function(e) {

e.preventDefault();
if($('#panel').hasClass('hidden'))//it's already hidden
{
$("#panel").animate({"left":0}, "slow").removeClass('hidden');//move it to the right and remove the hidden class
}
else $("#panel").animate({"left":"-856px"}, "slow").addClass('hidden');//it's not hidden so hide it and add the hidden class

});
});