Making an element visible and hide upon click

Question

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>

Answer 1

function showMask() {
    var node = document.getElementById('mask123');
    if (node.style.visibility=='visible') {
        node.style.visibility = 'hidden';
    }
    else
        node.style.visibility = 'visible'
}

This is how you should use your if condition :)

Answer 2

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.

Answer 3

.is is a jquery method. To use it, you first need to wrap your element/selector with jquery - $('#mask123').is(':visible').

But you don't actually need jquery for this, you can do it in basic JS:

function showMask() {
    var node = document.getElementById('mask123')
    if (node.style.visibility === 'visible') {
        node.style.visibility = 'hidden';
    } else {
        node.style.visibility = 'visible';
    }
}

Answer 4

If you don't mind using jQuery you can use a simple function and a CSS class:

// after removing onclick="" attribute from html 

$('#menu-btn-toggle').click(function(){
  $('#mask123').toggleClass('visible');
});

#mark123.visible{
  visibility: visible;
}

Note that in this case you also have to specify that #mask123 is initially hidden in order to do the transition to visible.

So you have to add this to your CSS

#mask123 {
  visibility:hidden; /* initial state = hidden */
}

-

Working jsFiddle