title: Show/hide multiple Divs with links
body: <p>I didn't clearly explain what I was trying to do. Hopefully this will be better.</p>
  
  <p>Currently I'm using <a href="https://jsfiddle.net/0bk7g0uL/2/" rel="nofollow">this Fiddle</a> to toggle some divs. It acts as an accordion and shows only one div at a time. Clicking one of the titles will show the content of that div and clicking another title will hide the first div and show that one.</p>
  
  <p>What I am having trouble with (and would like to do) is when opening one div I would like to hide access to the other divs until that first div is closed.</p>
  
  <p>Meaning if I Click on "Content2" to show that content, I would like to hide access to Content1, Content3, and Content4 until Content 2 is closed again.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function ReverseDisplay(d) {
    var els = document.querySelectorAll('.toggle.active:not(#' + d + ')');
    for (var i = 0; i &lt; els.length; i++) {
      els[i].classList.remove('active');
    }
    document.getElementById(d).classList.toggle('active')
  
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.toggle {
    display: none;
  }
  .toggle.active {
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="javascript:ReverseDisplay('content1')"&gt;
   Content1
  &lt;/a&gt;
  &lt;a href="javascript:ReverseDisplay('content2')"&gt;
   Content2
  &lt;/a&gt;
  &lt;a href="javascript:ReverseDisplay('content3')"&gt;
   Content3
  &lt;/a&gt;
  &lt;a href="javascript:ReverseDisplay('content4')"&gt;
   Content4
  &lt;/a&gt;
  
  &lt;div id="content1" class="toggle"&gt;
    &lt;p&gt;Content 1 goes here.&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="content2" class="toggle"&gt;
    &lt;p&gt;Content 2 goes here.&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="content3" class="toggle"&gt;
    &lt;p&gt;Content 3 goes here.&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="content4" class="toggle"&gt;
    &lt;p&gt;Content 4 goes here.&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>