<

Introduction to jQuery (Part 2)

Posted on
6,895 Points
895 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
Author:Jason Baker
0 Comments

Featured Post

Angular Fundamentals

Learn the fundamentals of Angular 2, a JavaScript framework for developing dynamic single page applications.

Suggested Videos

Title Views Activity
Box Shadow Effect in CSS 149
PHP, jQuery, and Form Actions 959
Introduction to HTML (Part 1) 111
Lists and Links 104
There's never been a better time to become a computer scientist. Employment growth in the field is expected to reach 22% overall by 2020, and if you want to get in on the action, it’s a good idea to think about at least minoring in computer science …
MVC applications have a rather unintuitive way to handle date and times within the default scaffolding views of MVC. This article shows the process of changing these to proper date and time pickers using Editor Templates and a rather nice extension …

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month