How to hide and show elements with JavaScript (updated)

webThere are times that we just want to hide an element first, and shows it later when the user performs something like clicking a button.

Implementing this functionality with JavaScript is quite easy. (On a side note, there is a really great section on Embedding JavaScript in HTML in JavaScript: The Definitive Guide: Activate Your Web Pages. If you don’t have that book, you really should.)
The strategy is to place the controlled element on a hidden layer (div), and then change the display attribute to make it show up.

First, Let’s define a variable, which tells if the video should be shown, in JavaScript.

Now, definition of the button and our layer

Finally, here comes the function to show or hide the layer

The result works like the following:

Post Update:

As pointed out by my schoolmate Demitry Toumilovich on my LinkedIn comments upon this post, it could be more easier with the JavaScript jQuery library.

This line simply loads the minimized jQuery v1.9.1 library. Once that is done, the rest is cake =)
The latest version of jQuery is 1.9.1, you may download and put it in your host. Then you may apply your downloaded jQuery library. (for your reference, there is a dedicated section in jQuery UI explaining show(), hide(), and toggle() methods, you may want to get that book for further study)

This line defines our function to show or hide the div.

Here is the raw HTML code for the button and div:

Line 1 defines our button and the action when it is clicked.
Line 2 creates the div with id video and is initialized to be hidden. With the id attribute, we can reference to our div in our JavaScript code showed above. ($(“#video”))
Line 3 inserts the YouTube video. WordPress automatically analyzes the YouTube link and shows the specified video. You may need the full embedded video code if you are blogging on other platforms.

As you can see, the existing jQuery library makes life even easier.
Many thanks to Demitry Toumilovich for enlightenment.

References & Further Readings

1. For more advanced features of hide(), show(), and toggle(), I found this article is extremely helpful: How to hide, show, or toggle your div with jQuery
2. Want to learn further about the magic of jQuery, here are three great books to start with:

  • Learning from jQuery
  • jQuery Mobile: Up and Running
  • jQuery UI
  • Learning from jQuery This is a tutorial that will take you through the basics of JavaScript and jQuery.
    jQuery Mobile: Up and Running This introductory guide to jQuery Mobile shows you how. Through a series of hands-on exercises, you’ll learn the best ways to use this framework’s many interface components to build customizable, multiplatform apps. You don’t need any programming skills or previous experience with jQuery to get started. By the time you finish this book, you’ll know how to create responsive, Ajax-based interfaces that work on a variety of smartphones and tablets, using jQuery Mobile and semantic HTML5 code.
    jQuery UI If you’re a web developer or designer looking to enrich your website with new features – without having to dive into full-fledged Javascript – jQuery UI is a must. This books demonstrates how to design elegant sliders, animations, drag-and-drop, progress bars, accordion menus… with the power of jQuery UI.