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.
The strategy is to place the controlled element on a hidden layer (
div), and then change the
display attribute to make it show up.
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
Easier Implementation with 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:
<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 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
- 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
- Want to learn further about the magic of jQuery, here are three great books to start with:
|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.|