title: Making an element visible and hide upon click
body: <p>I am trying to make an element <code>#mask123</code> visible or hidden upon click. By default, the element is hidden, but as I click it becomes visible. The js below works on first click, and the element turns visible. Now, I would like to click on the same button <code>#menu-btn-toggle</code> and the element toggles into invisible mode, which I cannot make it work. I am using inline css here. This is a simple case but my limited knowledge on js is not helping me.    </p>
  
  <pre><code>   &lt;div id="menu-btn"&gt;
        &lt;a href="#" title="Menu" id="menu-btn-toggle" class="menu-icon-link" onclick="showMask();"&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>the html code</p>
  
  <pre><code>&lt;div class="side-nav--mask"&gt;
      &lt;div class="js-side-nav-mask liquid-container"&gt;
          &lt;div id="mask123" class="liquid-child" style="visibility: hidden; top: 0px; left: 0px; opacity: 1;"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my JS:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function showMask() {
          var node = document.getElementById('mask123')
          node.style.visibility = 'visible';
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>When I try to a condition (below) it does not work:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function showMask() {
          var node = document.getElementById('mask123')
          node.style.visibility = 'visible';
          if node.is(":visible") {
              node.style.visibility = 'hidden';
          }
      }
  &lt;/script&gt;
  </code></pre>