The basics of Toggle function…

To download this youtube video, Click Here

Text Content:

This tutorial, a basic HTML page is created to show how Toggle function works.

A <div> is going to load and a link underneath is going to show/hide on clicking it.

To start off, create a HTML page and add reference to jQuery javascript library:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.js"></script>

Add a <div> next:

<div id="content">

</div>

Create an Anchor tag:

<a href="#">Click to Toggle</a>

Add a CSS file (style2.css) and add the following content for the <div>:

#content

{

 height:200px;

 width:200px;

 background-color:#FF9933;

}

Add reference to the CSS in the HTML page:

<link href="CSS/style2.css" rel="stylesheet" type="text/css" />

Add a new javascript file (toggleDemo.js) and attach it to the HTML page:

<script src="Scripts/toggleDemo.js" type="text/javascript"></script>

Now, add the following code to the javascript file:

$(function() {

 $('a').click(function() {

 $('#content').toggle();

 });

});

First line, we get the reference for the document
Second line, the click function of the anchor tag is obtained
Third Line, the toggle() functionality is added to the div with id ‘content’

Here, since we take all <a> tags, any other link on the page is going to make the <div> toggle.

A basic introduction to jQuery

To download this youtube video, Click Here

Text Content:

Basically, jQuery is a javascript code library designed to make life easier. It can be used to animate using CSS and other developments on the web page.

It can also be used with AJAX to make it very simple to work with. This is because using DOM elements in javascript is a lengthy process. Thanks to jQuery, now it is a simple process. The elements can be referred by their id.

To start of with, just create a new HTML page.

The jQuery library has to be imported in the page. Just search for “jQuery google”, copy the link location from featured downloads to the js file directly.
Now, the reference is added to the head part of the web page after title tag:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.js"></script>

For testing, just add a <div id=”content”></div> tag to the page. Use CSS (File->New->CSS) to give the div content some width and background color.

#content

{

 height:200px;

 width:200px;

 background-color:#FF9900;

}

Save both HTML and CSS page after adding reference to the stylesheet in the web page.

Now, we can add a function in jQuery to make the div disappear once the page is loaded.

Inline code can also be used to program, but it is better to use external js files because the files will be having a minimized load time (because it removes all blank files) when separated.

So, just add a new Javascript file (File-> New-> Javascript). Save it and add reference to the same in the current HTML page.

The coding part of the JS file:

Just like initialize function that developers use in javascript (which is used to execute some code after the document is loaded completely), the jQuery library provides the following:

$(funciton{}{

});

Now, the jQuery code is run when the page is loaded to the browser.

The <div> which was created in the HTML page can be referred like this  —

$("#content")

(Its really that simple… no document.getElementById and other complex names… Easy, isn’t it?)

The function that is going to be used is the toggle function. It toggles the visibility of the element for which the function is written for. (just makes it appear and disappear on executing the code)

Just type in the following code:

$("#content").toggle();

So now, when the page is loaded, the div will disappear and leave a blank page, which is what we wanted!!