17. Show/Hide elements

 254 total views,  1 views today

Let’s take a look at the show/hide element methods.

 Q.fn.hide = function () {
    return this.each(function(e){
      e.style.display = 'none';
    });
  }

  Q.fn.show = function () {
    return this.each(function(e){
      e.style.display = 'block';
    });
  }

To hide the element we simply loop through all selections and set each element’s style.display property to “none”.

To show the element we loop through all selections and set each element’s style.display property to “block”.

Let’s test the code

setTimeout(()=> {
Q(“#tasks”).hide();
}, 1000);

setTimeout(()=> {
qQ”#tasks”).show();
}, 3000);