Jquery Tutorial : Toggle Effect on Hover/Click
Posted by Vikas Ghodke on March 31st in Tutorials.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 25M from india, who loves everything about internet, started a blog named AcrisDesign. AcrisDesign is a blog dedicated to web designer, web developers, freelancers, bloggers and internet geeks. Here you will find topics related to web design, development, inspirational post and resources.
[...] ( Demo | Descargar ) [...]
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?
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!
[...] ( 效果演示| 在线下载 ) [...]
[...] (演示 | 下载) [...]
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.
[...] [...]