Anay Bose Anay Bose - 7 months ago 11
HTML Question

Making an element visible and hide upon click

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

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.