title: Toggle between display of 2 divs
body: <p>I am trying to learn jquery and I have 2 div elements that I want only with one button to toggle between hide and show. I tried to write everything that I want but I think the sintax is wrong. </p>
  
  <pre><code>&lt;div id="first"&gt;&lt;/div&gt;
  &lt;div id="second"&gt;
  &lt;/div&gt;
  &lt;button class="change"&gt;change&lt;/button&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>  #first {
      width:500px;
      height:500px;
      margin:0 auto;
      background-color:#ccc;
    }
    #second {
      width:500px;
      height:500px;
      margin:0 auto;
      background-color:black;
      display:none;
    }
  </code></pre>
  
  <p>and I wrote as Jquery </p>
  
  <pre><code>$(document).ready(function() {
      $('.change').click(function() {
        $('#first').hide();
        $('#second').show();
      });
    });
  </code></pre>
  
  <p>I was thinking about an if else statement however I am not sure if can handle that yet. </p>