How to hide and show elements with JavaScript (updated)

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

Using Hardcoded JavaScript

Implementing this functionality with JavaScript is quite easy. ( There is a really great section on Embedding JavaScript in HTML in book  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.

<script language="JavaScript">
var yesorno = "yes";
</script>

Now, definition of the button and our layer

<input id="show-hide-button" type="button" value="show video" onClick='showvideo(yesorno)'/>

<div id="my-sample-video" style="text-align: center; display: none;">

</div>

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

<script language="JavaScript">
  function showvideo(isshow){
    if (isshow=='yes'){
      yesorno = 'no';
      document.getElementById('show-hide-button').value = 'hide video';
      document.getElementById('my-sample-video').style.display = 'block';
    } else {
      yesorno = 'yes';
      document.getElementById('show-hide-button').value = 'show video';
      document.getElementById('my-sample-video').style.display = 'none';
    }
  }
</script>

Easier Implementation with jQuery Library

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.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>

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)

<script type="text/javascript">
function myFunction(){
  $("#video").toggle();
}
</script>

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

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

<button type="button" onclick="myFunction()">click me to show/hide the video</button>
<div id="video" style="display:none">

</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.

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:
    1. Learning from jQuery
    2. jQuery Mobile: Up and Running
    3. 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.

Leave a Reply