CODEWITHSUNDEEP
javascripthtml
Anay Bose
Anay Bose

Reputation: 890

Making an element visible and hide upon click

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>

Upvotes: 7

Views: 18775

Answers (5)

fbid
fbid

Reputation: 1570

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

Upvotes: 1

Gildas.Tambo
Gildas.Tambo

Reputation: 22663

Use ClassList.toggle and since you are using inline code you will need important

var btn = document.querySelector("#menu-btn-toggle"),
    mask123 = document.querySelector("#mask123");
function classToggle() {
      mask123.classList.toggle("visible")  
    }
btn.addEventListener("click", classToggle, false)
#mask123.visible{
    visibility: visible!important;
  }
<div id="menu-btn">
      <a href="#" title="Menu" id="menu-btn-toggle" class="menu-icon-link">Click to toggle </a>
    </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;">Some text</div>
    </div>
</div>

Upvotes: 0

misss-popcorn
misss-popcorn

Reputation: 600

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 :)

Upvotes: 4

bcherny
bcherny

Reputation: 3172

.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';
    }
}

Upvotes: 2

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67217

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.

Upvotes: 3

Related Questions