Jquery Tutorial : Toggle Effect on Hover/Click

Posted by on March 31st in Tutorials.

toggleeffect

Today we will learn how to get simple toggle effect on hover/click with jQuery. We will use Css and Jquery to get our final output. Check out the demo before getting into the tutorial.

Demo

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;
});
});

Demo

Try out our free gmat study guide, ccie security questions and latest PMI-001 training courses to get high flying success in finals. Beside mcitp dumps, 640-863 dumps, and 000-978 are the wings for flying.

Vikas ghodke, 25 Male from india, now working as freelance web designer. You can follow him on twitter @acrisdesign

57 Comments


  1. Simien

    On the hover toggle I cant select the content. Is there a condition that you can add to keep it open until you hover off the entire DIV?

  2. Hey great tutorial! One quick question: Is there an easy way to have the first Toggle close after you clicked on a different Toggle? Thanks!

  3. [...] ( 效果演示| 在线下载 ) [...]

  4. [...] (演示 | 下载) [...]


  5. Natalie

    Really awesome tutorial! I’ve looked through a dozen of webpages to find a solution for our faq page, only this tutorial was really useful. Thanks a lot.

Leave a Reply

Comment moderation is enabled. Your comment may take some time to appear.