title: javascript toggle show/hide div using one control
body: <p>Is it possible to toggle show/hide div using only one control?</p>
  
  <p>I have a div(div-menu) which is display:none by default and a logo('div-top-logo' inside a table)</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      //MENU HIDE/SHOW TOGGLE
      function toggleMenuDiv() {
          var showFlag;
          if (showFlag == false) {
              //SHOW DIV
              var menu = document.getElementById('div-menu'); menu.style.display = 'block'; var contents = document.getElementById('div-contents'); contents.style.display = 'block';
              showFlag = false;                
          }
          else {
              //HIDE DIV
              var elem = document.getElementById('div-menu'); elem.style.display = 'none';
              showFlag = true;
          }
      }            
  &lt;/script&gt;
  
  &lt;table class="top-menu"&gt;
      &lt;tr&gt;
          &lt;td id="div-top-logo" onclick="toggleMenuDiv();"&gt;&lt;/td&gt;
          &lt;td id="div-top-sysname"&gt;EDI Service&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;div id="div-menu" class="main-menu"&gt;
      Menu1&lt;br /&gt;
      Menu2&lt;br /&gt;
      Menu3
  &lt;/div&gt;
  </code></pre>
  
  <p>Any kind of help would be appreciated.</p>