Two slide in divs fired from one button.

I need to trigger two slide-in divs with one button. I have played around with http://jsfiddle.net/hoptubtowers1/VmSX4/133/ I want the result like a simple pair of curtains. On the first click, the "red" curtain slides out left and the "green" curtain slides out rig开发者_JAVA百科ht. On the second click, the "curtains" will close.

just checked it... this script should do the trick.

function toggleDivs() {
    var $red = $("#red");
    var $green =$("#green");
       if ($green.position().left*1 == 200) {
            $red.animate({  left: "-400px"  });
            $green.animate({left: "400px"  });
    }
    else {
            $red.animate({  left: "-200px"  });
            $green.animate({left: "200px"  });
    }

}


$("button").bind("click", function() {
    toggleDivs();
});

Something like this:

var $curtains = $('#red,#green')
$('button').toggle(function(){
  $curtains.animate({
    width:0
  })
},function(){
  $curtains.animate({
    width:'50%'
  })
})

And the CSS:

#container {
  position:relative;
  width: 400px;
  height: 600px;
}
#red {
  width:50%;
  position:absolute;
  left:0;
  background:red;
}
#green {
  width:50%;
  position:absolute;
  right:0;
  background:green;
}

And the HTML:

<button>Click me</button>
<div id="container">
  <div id="red"></div>
  <div id="green"></div>
</div>