tutorial #1: Slide Toggle

In this demonstration, you will, also, see how to create a slide-effect toggle. jQuery allows you to show and hide elements, and control the speed of how quickly or gradually it can hide the content. You will learn to construct the jQuery code needed and the purpose of each line, as well as how to create the toggle in HTML and CSS.

Below is a demonstration of side toggle

Avatar Is Currently The Highest Grossing Movie Of All Time

The How-To

HTML

 
<div id="toggle">
                                    
<p>Avatar Is Currently The Highest Grossing Movie Of All Time</p>
                                
</div>

<input type="button" id="button" value="Toggle" />

#toggle {
	background:#0C5A7A;
	height:50px;
	width:auto;
}

#toggle p {
	font-size:24px;
	text-align:center;
	color:#FFFFFF;
}

$(document).ready(function(){ 
// This is needed to make the document ready and functional.
	$('#button').click(function(){ 
//This function will trigger the event, everytime the button form is click on. 
		$('#toggle').slideToggle('slow'); 
//This method will toggle the denoted elements to slide up or down.  
//In the the ".slideToggle()" method, you can set the speed of the toggle, the values are "fast" and "slow"  
	}); 
});//Closes the function.