I am trying to make an element #mask123 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 #menu-btn-toggle 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.

   <div id=menu-btn>

      <a href=# title=Menu id=menu-btn-toggle class=menu-icon-link onclick=showMask();>

    </div>

the html code

<div class=side-nav--mask>

    <div class=js-side-nav-mask liquid-container>

        <div id=mask123 class=liquid-child style=visibility: hidden; top: 0px; left: 0px; opacity: 1;></div>

    </div>

</div>

Here is my JS:

<script type=text/javascript>

    function showMask() {

        var node = document.getElementById('mask123')

        node.style.visibility = 'visible';

    }

</script>

When I try to a condition (below) it does not work:

<script type=text/javascript>

    function showMask() {

        var node = document.getElementById('mask123')

        node.style.visibility = 'visible';

        if node.is(:visible) {

            node.style.visibility = 'hidden';

        }

    }

</script>