Making an element visible and hide upon click
<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>