here I am trying to make an element
#mask123
#menu-btn-toggle
<div id="menu-btn">
<a href="#" title="Menu" id="menu-btn-toggle" class="menu-icon-link" onclick="showMask();">
</div>
<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>
<script type="text/javascript">
function showMask() {
var node = document.getElementById('mask123')
node.style.visibility = 'visible';
}
</script>
<script type="text/javascript">
function showMask() {
var node = document.getElementById('mask123')
node.style.visibility = 'visible';
if node.is(":visible") {
node.style.visibility = 'hidden';
}
}
</script>
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.