How to reveal or hide div on click with a slide effect?

Question

I try to toggle a small animation using jquery.

I have a div (1, GREEN) that's hiding another div (2, RED & BLUE). In DIV (1, GREEN) there's another DIV (3, YELLOW), which functions as button. What I'm trying to achieve is when an user clicks on DIV (3, YELLOW), DIV (1, GREEN) (which contains DIV (3, YELLOW)) slides to the left so DIV (2, RED & BLUE) reveals.

To understand what I'm doing and to see what I have so far:

HTML:

 <div class="pollSlider">
    <div class="yesno">
        Yes / No
    </div>

</div>
<div id="pollSlider-button">
    <div id="close-button"></div>
</div>

CSS

.pollSlider{
    position:fixed;
    height:50px;
    background:red;
    width:300px;
    right:0px;
    top:300px;
}

.yesno{
    position:absolute;
    height:50px;
    background:blue;
    width:50px;
    right:0px;
    color:#FFF;
}

#pollSlider-button{
    position:fixed;
    width:300px;
    height:50px;
    right:0px;
    background:green;
    top:300px;
}

#close-button{
    position:absolute;
    width:10px;
    height:10px;
    right:10px;
    top:7px;
    background:yellow;
}

JQUERY

$(document).ready(function()
{
    var slider_width = $('.yesno').width();//get width automaticly
  $('#close-button').click(function() {
    if($(this).css("margin-right") == slider_width+"px" && !$(this).is(':animated'))
    {
        $('#pollSlider-button').animate({"margin-right": '-='+slider_width});
    }
    else
    {
        if(!$(this).is(':animated'))
        {
            $('#pollSlider-button').animate({"margin-right": '+='+slider_width});
        }
    }


  });
 });     

All togheter in a fiddle: http://jsfiddle.net/XNnHC/1974/

There's one problem on the code I have. It doesn't hide the DIV (2, RED & BLUE) any more, it just keeps on sliding to the left further and further, even if it has passed the RED part of DIV (2).

What do I need to change to simple toggle the DIV. Clicking YELLOW will reveal BLUE if it's hidden and hide it when it's revealed. RED isn't really important, that isn't going to hold any information.

Answer 1

I managed to get it the div to slide back to the default instead of continuing to slide left.

What I changed was that I added a slideCount variable to let the script know when to go back to a "closed" state (hiding RED and BLUE) as well as changing the first if conditional from looking at $(this) to $("#pollSlider-button").

Now, when you click it once, it shows BLUE. Click it again, it will show RED. Once more after that will hide BLUE and RED.

Here's a JSFiddle

Answer 2

You were comparing the wrong values. First you move "pollslider-button" but checkin $this which is the close button. Since it is nested insicde the div its relative margin does not change.

I have removed the :animated part since you are not using it now, feel free to re-add it again.

Code below works fine inside the fiddle

$(document).ready(function()
    {
        var slider_width = $('.yesno').width();//get width automaticly
      $('#close-button').click(function() {
        if($('#pollSlider-button').css("margin-right") == slider_width+'px')
        {
            $('#pollSlider-button').animate({"margin-right": '-='+slider_width});
        }
        else
        {

                $('#pollSlider-button').animate({"margin-right": '+='+slider_width});

        }


      });
     });     

Answer 3

try to use this

$(document).ready(function()
{
   var clicked = true;
   var slider_width = $('.yesno').width();//get width automaticly
   $('#close-button').click(function() 
   {
    if(clicked){
        $('#pollSlider-button').animate({"margin-right": '+='+slider_width});
       clicked = false;
    } else {
       $('#pollSlider-button').animate({"margin-right": '-='+slider_width});
       clicked = true; 
    }

 });
});