Jquery Tutorial : Toggle Effect on Hover/Click

Vikas Ghodke In Tutorials

March 31st | 34 Comments

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

Author : Vikas Ghodke

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

34 Responses to “Jquery Tutorial : Toggle Effect on Hover/Click”

uberVU - social comments says:

March 31, 2010 at 9:13 am

Social comments and analytics for this post…

This post was mentioned on Twitter by CreativityGeek: Acris Design – Jquery Tutorial : Toggle Effect on Hover/Click http://bit.ly/9Dqa7z…
Jquery Tutorial : Toggle Effect on Hover/Click | AcrisDesign | RefreshTheNet says:

March 31, 2010 at 9:52 am

[...] Continued here: Jquery Tutorial : Toggle Effect on Hover/Click | AcrisDesign [...]
Vadim says:

March 31, 2010 at 10:36 am

You should solve the problem with queue effect , .stop() I think will help
Richie says:

March 31, 2010 at 11:14 am

wow… it is really cool. Good work, mate
Jquery Tutorial : Toggle Effect on Hover or Click | Tutorialicious.info says:

March 31, 2010 at 11:53 am

[...] Here is the original post: Jquery Tutorial : Toggle Effect on Hover or Click [...]
Jquery Tutorial : Toggle Effect on Hover or Click | AcrisDesign » KHMER855.COM says:

March 31, 2010 at 3:16 pm

[...] View post: Jquery Tutorial : Toggle Effect on Hover or Click | AcrisDesign [...]
Twitter Design Resource #2 | nenuno creative says:

March 31, 2010 at 4:26 pm

[...] Jquery Tutorial: Toggle Effect on Hover/Click – http://bit.ly/cvFq1q [...]
Jquery Tutorial : Toggle Effect on Hover or Click | AcrisDesign » WB Tips says:

March 31, 2010 at 4:46 pm

[...] Go here to read the rest: Jquery Tutorial : Toggle Effect on Hover or Click | AcrisDesign [...]
TraVotez says:

March 31, 2010 at 6:12 pm

[...] (64) JQuery tutorial: efecto hover activar / clic [...]
New Hope for Type 2 Diabetes and Atherogenic Dyslipidemia | VIBRANT HEALTH FITNESS FORUM says:

April 1, 2010 at 12:15 am

[...] Jquery Tutorial : Toggle Effect on Hover or Click | AcrisDesign [...]
2010-04-04 유용한 링크 | We are connected says:

April 3, 2010 at 10:53 pm

[...] Jquery Tutorial : Toggle Effect on Hover/Click [...]
CSS Brigit | Jquery Tutorial : Toggle Effect on Hover/Click says:

April 5, 2010 at 7:32 am

Jquery Tutorial : Toggle Effect on Hover/Click …

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….
How To Use SSH For All Devices On 3.1.2 Firmware | cheapax.info says:

April 5, 2010 at 5:44 pm

[...] Jquery Tutorial : Toggle Effect on Hover or Click | AcrisDesign [...]
180+ Got to Check Out Fresh Articles for Designers and Developers | tripwire magazine says:

April 6, 2010 at 12:36 am

[...] Jquery Tutorial : Toggle Effect on Hover/Click [...]
Internet Marketing Online Sales Boosting Toolbox Software. | Launch Bonus Net says:

April 7, 2010 at 3:04 pm

[...] Jquery Tutorial : Toggle Effect on Hover or Click | AcrisDesign [...]
Kyle W says:

April 8, 2010 at 11:21 am

Great tutorial, the .hover() function in jQuery is really useful. In some instances, I’ve found it best to use the jQuery hoverintent plugin to hide/show things since sometimes if a user hovers over lots of elements it can be confusing and distracting to them.

http://cherne.net/brian/resources/jquery.hoverIntent.html
wespai says:

April 9, 2010 at 4:26 am

Good Job
Jquery Tutorial : Toggle Effect on Hover or Click | AcrisDesign | Source code bank says:

April 10, 2010 at 1:41 am

[...] Link: Jquery Tutorial : Toggle Effect on Hover or Click | AcrisDesign [...]
jQuery Tutorial : Toggle Effect on Hover or Click | Design Newz says:

April 10, 2010 at 1:01 pm

[...] jQuery Tutorial : Toggle Effect on Hover or Click [...]
jQuery Tutorial : Toggle Effect on Hover or Click - Everything You Need - Basic Web Design says:

April 11, 2010 at 3:43 am

[...] jQuery Tutorial : Toggle Effect on Hover or Click jQuery Tutorial : Toggle Effect on Hover or Click [...]
andrew.wong.p.k – 8 must see elegant yet simple JQuery says:

April 11, 2010 at 5:06 am

[...] Tutorial by Acris Design. Works great for FAQ [...]
jQuery Tutorial : Toggle Effect on Hover or Click » blog.lanche86.com says:

April 15, 2010 at 7:06 pm

[...] jQuery Tutorial : Toggle Effect on Hover or Click Filed in Tutorial, Uncategorized, jQuery Posted by Jon Phillips Tagged Design, jQuery, toggle, Tutorial blog.lanche86.com is powered by WordPress using theme Tribune [...]
180+ Got to Check Out Fresh Articles for Designers and Developers | morlandotech.com says:

April 18, 2010 at 1:37 am

[...] Jquery Tutorial : Toggle Effect on Hover/Click [...]
What Matters Today Blog Enlightment » 180+ Got to Check Out Fresh Articles for Designers and Developers says:

April 21, 2010 at 3:09 pm

[...] Jquery Tutorial : Toggle Effect on Hover/Click [...]
logo design says:

April 26, 2010 at 5:07 am

[...] Jquery Tutorial : Toggle Effect on Hover/Click [...]
Best of Amazing jQuery Tutorials April 2010 « Defonic International Solutions says:

May 12, 2010 at 12:19 am

[...] Jquery Tutorial : Toggle Effect on Hover/Click [...]
Duniya Tv LIVE says:

May 13, 2010 at 6:07 pm

rocking information, friend thanks for this
Jquery Tutorial : Toggle Effect on Hover or Click | AcrisDesign
Maykel Barcala says:

June 4, 2010 at 1:20 pm

Hi,

I use your toggle effect onClick to show and hide a small gallery with a couple of pictures inside and it work perfect but i was wondering if you can help me to make done one small thing more. and it’s that would like to move up/down too the footer of the page so it doesn’t look so big when all is close it? any idea or help on this?

regards

mbarcala
You are now listed on FAQPAL says:

June 29, 2010 at 5:35 am

Jquery Tutorial : Toggle Effect on Hover or Click…

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….
diabete says:

July 12, 2010 at 11:06 am

I like the way you have it laid out, Diabete Diabete
online website design says:

July 13, 2010 at 11:42 pm

Great tutorial, the .hover() function in jQuery is really useful. In some instances, I’ve found it best to use the jQuery hoverintent plugin to hide/show things since sometimes if a user hovers over lots of elements it can be confusing and distracting to them.
Adwords google es says:

July 22, 2010 at 1:15 pm

vítores Malo, muy usar la información completa. Gracias.
Jquery Tutorial : Toggle Effect on Hover or Click | AcrisDesign
Flitz says:

August 14, 2010 at 3:07 pm

Dude! thanks a bunch. i tried so many jquery effects to hide a certain things in my blog but this is only the one tht worked perfectly.
I have some question.. how can I make the content when i mouseover on it it will stays in place?
Home Remedies says:

August 16, 2010 at 2:26 am

Thanks for your toggle menu. Its very simple and easy to use.