title: Toggle visibility of 2 divs with 2 buttons
body: <p>I am having issues with my code</p>
  
  <p>I am trying to show 1 div (<strong>show_1</strong>) by default and then hide it and show a second div (<strong>show_2</strong>) when button 2 is clicked. And then when button 1 is clicked hide <strong>show_2</strong> and show <strong>show_1</strong> again </p>
  
  <p><a href="https://jsfiddle.net/mgzurjgL/4/" rel="nofollow">https://jsfiddle.net/mgzurjgL/4/</a></p>
  
  <p>It is not working though, nothing happens when I click either buttons.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function switch_div(show_1, show_2) {
    var a = document.getElementById(show_1);
    var a2 = document.getElementById(show_2);
    if (a.style.display == 'block') {
      a.style.display = 'block';
      a2.style.display = 'none';
    } else {
      a.style.display = 'none';
      a2.style.display = 'block';
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.button {
    width: 100px;
    height: 30px;
    display: inline-block;
    background-color: black;
    margin: 0 10px 10px 0;
    color: #fff;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
  }
  .button:hover {
    background-color: red;
  }
  .content {
    width: 400px;
    height: 100px;
    display: block;
    background-color: gray;
  }
  .hide {
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="button" onclick="switch_div('show_1', 'show_2');"&gt;
    1
  &lt;/div&gt;
  &lt;div class="button" onclick="switch_div('show_1', 'show_2');"&gt;
    2
  &lt;/div&gt;
  
  &lt;div class="content" id="show_1"&gt;
    Show by default (and when button 1 is clicked)
  &lt;/div&gt;
  &lt;div class="content hide" id="show_2"&gt;
    Show this div when button 2 is clicked
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>