Build Your Own JavaScript DOM Library
About Lesson

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

0% Complete