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.