<

Introduction to jQuery (Part 2)

Posted on
6,648 Points
648 Views
Last Modified:
Experience Level: Beginner
4:17
The viewer will learn the basics of jQuery including how to code hide show and toggles.

Video Steps

1. Reference your jQuery libraries


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Open in new window

2. Include your new external js/jQuery file


<script src="js/mediasage.js"></script>

Open in new window

3. Write your first lines of code to setup your site for jQuery.

jQuery(document).ready(function($){
});

Open in new window

4. Setup your first on click event


$(document).on('click', '.myvid', function(){
});

Open in new window

5. Type in what is to happen on the click


 $(".mybutton").show();
  $("#intro").toggle("fold", 1000);
 // $("#vid1").toggle("fold", 1000);

Open in new window


 So the total block will look like this.

 $(document).on('click', '.myvid', function(){
	$(".mybutton").show();
    $("#intro").toggle("fold", 1000);
 // $("#vid1").toggle("fold", 1000);
});

Open in new window


6. Set up your second on click event.

$(document).on('click', '.mybutton', function(){
});

Open in new window

7. Add in the code to hide the video.


$("#vid1").hide();

Open in new window


So the total block of code will look like this.

$(document).on('click', '.mybutton', function(){
$("#vid1").hide();
});

Open in new window

8. In your html file add the class into the home link as such.

Edit <li><a href="#">Home</a></li> so it looks like below.

<li><a href="#" class="myvid">Home</a></li>

Open in new window

9. Create the html for your button

Make sure it looks like this:
<button class="mybutton">Hide video</button>

Open in new window

10. In the audio tag edit it to look like below.

Make sure to add in id="intro" this is what jQuery will be looking for.
<audio id="intro" controls="controls">

Open in new window

11. In the video tag edit it to look like below.

Make sure to add id="vid1" as this is what jQuery will be looking for.
<video id="vid1" controls="controls" width="640" height="480">

Open in new window

0
Comment
Author:Jason Baker
0 Comments

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Join & Write a Comment

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month