title: Toggle class name
body: <p>I've got a list of items: </p>
  
  <pre><code>&lt;ul id='list'&gt;
      &lt;li id='1-i' class='visible'&gt;&lt;a href='javascript:return false;' onclick="toggle_class('1-i');"&gt;Toggle #1&lt;/a&gt;&lt;/li&gt;
      &lt;li id='2-i' class='visible'&gt;&lt;a href='javascript:return false;' onclick="toggle_class('2-i');"&gt;Toggle #2&lt;/a&gt;&lt;/li&gt;
      &lt;li id='3-i' class='visible'&gt;&lt;a href='javascript:return false;' onclick="toggle_class('3-i');"&gt;Toggle #3&lt;/a&gt;&lt;/li&gt;
      &lt;li id='4-i' class='visible'&gt;&lt;a href='javascript:return false;' onclick="toggle_class('4-i');"&gt;Toggle #4&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <ol>
  <li><p>If you click one of the items (i.e. "Toggle #1"), I want the class name of all other items to change from <em>visible</em> to <em>invisible</em>. </p></li>
  <li><p>If you click another item now, I want the class name of this item to change to <em>visible</em> (with no effect to all other class names, they should remain as they are)</p></li>
  </ol>
  
  <p>Simple example: You first clicked "Toggle #4", then "Toggle #1". Result should be:</p>
  
  <pre><code>&lt;ul id='list'&gt;
      &lt;li id='1-i' class='visible'&gt;&lt;a href='javascript:return false;' onclick="toggle_class('1-i');"&gt;Toggle #1&lt;/a&gt;&lt;/li&gt;
      &lt;li id='2-i' class='invisible'&gt;&lt;a href='javascript:return false;' onclick="toggle_class('2-i');"&gt;Toggle #2&lt;/a&gt;&lt;/li&gt;
      &lt;li id='3-i' class='invisible'&gt;&lt;a href='javascript:return false;' onclick="toggle_class('3-i');"&gt;Toggle #3&lt;/a&gt;&lt;/li&gt;
      &lt;li id='4-i' class='visible'&gt;&lt;a href='javascript:return false;' onclick="toggle_class('4-i');"&gt;Toggle #4&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I tried to write a js function but the behavior is different from what I expected: </p>
  
  <pre><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>
  
  <p>On first click, the selected item changes its class to <em>invisible</em>, and so does every second item in the list. I don't understand why this happens. What do I need to change in the code to make it work?</p>