Advanced JS Fundamentals to jQuery & Pure DOM Scripting

Advanced JS Fundamentals to jQuery & Pure DOM Scripting Adding show() and hide() methods

Topics:
Justin Meyer
Justin Meyer
Bitovi

This course is out of date and does not reflect Frontend Masters current standards. We now recommend you take the JavaScript: The Hard Parts course.

Check out a free preview of the full Advanced JS Fundamentals to jQuery & Pure DOM Scripting course:
The "Adding show() and hide() methods" Lesson is part of the full, Advanced JS Fundamentals to jQuery & Pure DOM Scripting course featured in this preview video. Here's what you'd learn in this lesson:

The last methods for Justin to implement are hide() and show(). The will set the display property to “none” and “” respectively.

Get Unlimited Access Now

Transcript from the "Adding show() and hide() methods" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Justin: The final thing to make your tabs widgets work, I'm gonna add a hide and show method. This one is really easy. Hide should just set to display to none and show should make sure that there is no, display is set to empty, so it will show itself again.

[00:00:20] JQuery's hide and show is a little bit more advanced. It can work even if the element style in the stylesheet had a display none. Its hide will work or its show will work to show it, but I'm not gonna do that. So let me make a hide and show and this is the last thing before we hit elements or events.

[00:00:45] So hide should just be doing this.css display, none and show should be doing this.css display empty string. So by setting to the empty string, or wiping out the display, none, because maybe in the CSS, someone had display inline block, display block, we don't want to overwrite it by assuming they wrote block or something like that.