Geek Answers Handbook

Create a visible item and hide it when clicked

I am trying to make an element #mask123visible or hidden when clicked. By default, the element is hidden, but when clicked, it becomes visible. The js below works on the first click, and the element becomes visible. Now I would like to click on the same button #menu-btn-toggle, and the element will switch to invisible mode, and I can not make it work. I am using inline css here. This is a simple case, but my limited knowledge of js does not help me.

   <div id="menu-btn">
      <a href="#" title="Menu" id="menu-btn-toggle" class="menu-icon-link" onclick="showMask();">
    </div>

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 fulfill the condition (below), this 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>
+4
source share
5 answers

Try switching the property visibilitybased on the current value,

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

jquery is() node. node , .

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

if:)

+3

.is - jquery. , / jquery - $('#mask123').is(':visible').

jquery, JS:

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

jQuery, CSS:

// after removing onclick="" attribute from html 

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

#mark123.visible{
  visibility: visible;
}

, , #mask123 .

, CSS

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

-

jsFiddle

+1

ClassList.toggle, ,

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>
Hide result
0

More articles:


All Articles