Making an element visible and hide upon click

Question

here 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 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>

Answer 1

Try to toggle the visibility property based on current value of it,

function showMask() {
    var node = document.getElementById('mask123')
    var visibility = node.style.visibility;
    node.style.visibility = visibility == "visible" ? 'hidden' : "visible"
}

You are accessing the jquery's is() function over a plain node object. Node object doesn't have function called is in its prototype.