<h2>Move Cursor</h2>
<div class="togglebox">
<div class="content">
<h3>Content Here</h3>
<!--Content Here--></div>
</div>



Step 2 : Styling Our HTML Document

Now we need to style our html elements like heading, togglebox and content. See the codes below.


h2 {
	padding:10px;
	font-size:20px;
	color:#243953;
	background-color:#fafafa;
	border: 1px solid #a9a9a9;
	-moz-border-radius: 7px; /* Rounder Corner */
       -webkit-border-radius: 7px;
	-khtml-border-radius: 7px;
	text-align:center;
	font-family:Georgia, "Times New Roman", Times, serif;
	margin-bottom:5px;
}
.togglebox {
	background-color:#CCC;
	border: 1px solid #a9a9a9;
	/* Rounder Corner */
	-moz-border-radius: 7px;
        -webkit-border-radius: 7px;
	-khtml-border-radius: 7px;
	overflow: hidden;
	font-size: 1.2em;
	width: 295px;
	clear: both;
	margin-bottom:10px;
}
.togglebox .content {
	padding: 20px;
}





Step 3 : Jquery Time

Create a new JS file and then Link Jquery and new js file to Html document


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"><!--mce:0--></script>
<script src="toggle.js" type="text/javascript"><!--mce:1--></script>


Now to give some smoth toggle effect we need to write some simple jquery code to give it a life. Below are the codes with explanation.




Toggle Effect On Hover

$(document).ready(function(){
//Hide the tooglebox when page load
$(".togglebox").hide();
//slide up and down when hover over heading 2
$("h2").hover(function(){
// slide toggle effect set to slow you can set it to fast too.
$(this).next(".togglebox").slideToggle("slow");
return true;
});
});




Toggle Effect On Click

$(document).ready(function(){
//Hide the tooglebox when page load
$(".togglebox").hide();
//slide up and down when click over heading 2
$("h2").click(function(){
// slide toggle effect set to slow you can set it to fast too.
$(this).next(".togglebox").slideToggle("slow");
return true;
});
});

Toggle Effect On Hover

$(document).ready(function(){
//Hide the tooglebox when page load
$(".togglebox").hide();
//slide up and down when hover over heading 2
$("h2").hover(function(){
// slide toggle effect set to slow you can set it to fast too.
$(this).next(".togglebox").slideToggle("slow");
return true;
});
});




Toggle Effect On Click

$(document).ready(function(){
//Hide the tooglebox when page load
$(".togglebox").hide();
//slide up and down when click over heading 2
$("h2").click(function(){
// slide toggle effect set to slow you can set it to fast too.
$(this).next(".togglebox").slideToggle("slow");
return true;
});
});

Step 1 : HTML

So now we will document our page. First of all we need heading and toggle box for hide and 
show. Check out the below html code to get it clear.

<h2>Move Cursor</h2>
<div class="togglebox">
<div class="content">
<h3>Content Here</h3>
<!--Content Here--></div>
</div>



Step 2 : Styling Our HTML Document

Now we need to style our html elements like heading, togglebox and content. See the codes below.


h2 {
	padding:10px;
	font-size:20px;
	color:#243953;
	background-color:#fafafa;
	border: 1px solid #a9a9a9;
	-moz-border-radius: 7px; /* Rounder Corner */
       -webkit-border-radius: 7px;
	-khtml-border-radius: 7px;
	text-align:center;
	font-family:Georgia, "Times New Roman", Times, serif;
	margin-bottom:5px;
}
.togglebox {
	background-color:#CCC;
	border: 1px solid #a9a9a9;
	/* Rounder Corner */
	-moz-border-radius: 7px;
        -webkit-border-radius: 7px;
	-khtml-border-radius: 7px;
	overflow: hidden;
	font-size: 1.2em;
	width: 295px;
	clear: both;
	margin-bottom:10px;
}
.togglebox .content {
	padding: 20px;
}



Step 3 : Jquery Time

Create a new JS file and then Link Jquery and new js file to Html document


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"><!--mce:0--></script>
<script src="toggle.js" type="text/javascript"><!--mce:1--></script>


Now to give some smoth toggle effect we need to write some simple jquery code to give it a life. Below are the codes with explanation.


Toggle Effect On Hover

$(document).ready(function(){
//Hide the tooglebox when page load
$(".togglebox").hide();
//slide up and down when hover over heading 2
$("h2").hover(function(){
// slide toggle effect set to slow you can set it to fast too.
$(this).next(".togglebox").slideToggle("slow");
return true;
});
});




Toggle Effect On Click

$(document).ready(function(){
//Hide the tooglebox when page load
$(".togglebox").hide();
//slide up and down when click over heading 2
$("h2").click(function(){
// slide toggle effect set to slow you can set it to fast too.
$(this).next(".togglebox").slideToggle("slow");
return true;
});
});

http://acrisdesign.com/2010/03/jquery-tutorial-toggle-effect-on-hoverclick/

Jquery Tutorial : Toggle Effect on Hover/Click

jquery

jQuery