title: Toggling Between Two Divs by One Click Button
body: <p>I am having trouble on toggling two elements(divs) with button click event. I have a <a href="http://jsfiddle.net/Behseini/RLLwq/" rel="nofollow">demo here</a></p>
  
  <p>My code is like this :</p>
  
  <pre><code>&lt;div id="green"&gt;&lt;/div&gt;
  &lt;div id="red"&gt;&lt;/div&gt;
  &lt;button&gt;Call Red&lt;/button&gt;
  &lt;script&gt;
  $(document).ready(function(){
   $("button").click(function () {
    $("#green").show();
    $("#red").hide();
   });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>and css looks like:</p>
  
  <pre><code>#red {
      border:1px solid black;
      width:50px;
      height:50px;
      background-color:red;
  }
  #green {
      border:1px solid black;
      width:50px;
      height:50px;
      background-color:green;
      display:none;
  }
  </code></pre>
  
  <p>What I need is having a Toggle function to change visibilty between two divs and change the
  value of button based on next color. Can you please tell me how to do that? </p>