title: Javascript: Toggle div visibility in two steps
body: <p>This question maybe stupid for many here. I have a bunch of divs and want to make them appear/disappear on click with special behaviour: </p>
  
  <p>On-load state: all divs visible</p>
  
  <ol>
  <li><p>click: all divs disappear, except for the one that was selected when clicking</p></li>
  <li><p>to n-th click: toggle visibility for the div that was selected when clicking</p></li>
  </ol>
  
  <p>What I've got so far: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  function toggle_visibility(id) {
              var e = document.getElementById(id);
              if(e.style.display == 'block')
                e.style.display = 'none';
              else
                e.style.display = 'block';
          }
  
    function toggle_class(id) {
              var thisElem = document.getElementById(id);
              var invisible = "invisible";
              var visible = "visible";
              var classes = thisElem.classList;
              if (classes == invisible) {
                  thisElem.className = thisElem.className.replace(invisible, visible);
              }
              else {
                  thisElem.className = thisElem.className.replace(visible, invisible);
              }
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul id='list'&gt;
   &lt;li id='1-i' class='visible'&gt;&lt;a href='javascript:return false;' onclick="toggle_visibility('1'); toggle_class('1-i');"&gt;Toggle DIV #1&lt;/a&gt;&lt;/li&gt;
   &lt;li id='2-i' class='visible'&gt;&lt;a href='javascript:return false;' onclick="toggle_visibility('2'); toggle_class('2-i');"&gt;Toggle DIV #2&lt;/a&gt;&lt;/li&gt;
   &lt;li id='3-i' class='visible'&gt;&lt;a href='javascript:return false;' onclick="toggle_visibility('3'); toggle_class('3-i');"&gt;Toggle DIV #3&lt;/a&gt;&lt;/li&gt;
   &lt;li id='4-i' class='visible'&gt;&lt;a href='javascript:return false;' onclick="toggle_visibility('4'); toggle_class('4-i');"&gt;Toggle DIV #4&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  
  &lt;div id='1' style='display: block;'&gt;&lt;h3&gt;DIV #1&lt;/h3&gt;&lt;/div&gt;
  &lt;div id='2' style='display: block;'&gt;&lt;h3&gt;DIV #2&lt;/h3&gt;&lt;/div&gt;
  &lt;div id='3' style='display: block;'&gt;&lt;h3&gt;DIV #3&lt;/h3&gt;&lt;/div&gt;
  &lt;div id='4' style='display: block;'&gt;&lt;h3&gt;DIV #4&lt;/h3&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This code shows all divs on page-load, then toggles visibility for the selected div on click. So on first click only the selected div will disappear with all others staying still visible - the opposite of what I want. Though from second click on, this behaviour is the desired one. </p>
  
  <p>I have found similar other threads (like <a href="https://stackoverflow.com/questions/19407261/toggle-visibility-multiple-divs-javascript">this one</a>), but their issues seem to add complexity I'd like to avoid.</p>
  
  <p>Thanks a lot for your help!</p>
  
  <hr>
  
  <p>Edit: 
  Now I tried to update <strong>function toggle_class(id) {</strong> following Arun P Johny's example: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>        var firstrun = true;
  
          function toggle_class(id) {
              var thisElem = document.getElementById(id);
              var invisible = "invisible";
              var visible = "visible";
              if (thisElem.className == 'invisible' &amp;&amp; !firstrun) {
                  thisElem.className = thisElem.className.replace(invisible, visible);
              } else {
                  thisElem.className = thisElem.className.replace(visible, invisible);
              }
              if (firstrun) {
                  var children = document.getElementsByClassName('visible');
                  for (var i = 0; i &lt; children.length; i++) {
                      if (children[i].id != id) {
                          children[i].className = thisElem.className.replace(visible, invisible);
                      }
                  }
              }
              firstrun = false;
          }</code></pre>
  </div>
  </div>
  </p>
  
  <p>The result is somewhat confusing: On first click, the selected element changes its class to <em>invisible</em> (which I do understand, since the script tries to replace the class <em>visible</em> with <em>invisible</em> for all elements). So this is not the behaviour I want, the clicked element is supposed to keep the class <em>visible</em> (until it is clicked again, since this is when the div disappears). </p>
  
  <p>And the even more confusing part to me: Not all other elements change their class to <em>invisible</em>, but only every second element. </p>
  
  <p>What did I do wrong?</p>