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, 21 Male from india, now working as freelance web designer. You can follow him on twitter @acrisdesign

57 Comments


  1. uberVU - social comments

    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...


  2. Jquery Tutorial : Toggle Effect on Hover/Click | AcrisDesign | RefreshTheNet

    [...] Con­tin­ued here: Jquery Tuto­r­ial : Tog­gle Effect on Hover/Click | AcrisDesign [...]


  3. Vadim

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


  4. Richie

    wow… it is really cool. Good work, mate :)


  5. Jquery Tutorial : Toggle Effect on Hover or Click | Tutorialicious.info

    [...] Here is the original post: Jquery Tutorial : Toggle Effect on Hover or Click [...]


  6. Jquery Tutorial : Toggle Effect on Hover or Click | AcrisDesign » KHMER855.COM

    [...] View post: Jquery Tutorial : Toggle Effect on Hover or Click | AcrisDesign [...]


  7. Twitter Design Resource #2 | nenuno creative

    [...] Jquery Tutorial: Toggle Effect on Hover/Click – http://bit.ly/cvFq1q [...]


  8. Jquery Tutorial : Toggle Effect on Hover or Click | AcrisDesign » WB Tips

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


  9. TraVotez

    [...] (64)  JQuery tutorial: efecto hover activar / clic [...]


  10. New Hope for Type 2 Diabetes and Atherogenic Dyslipidemia | VIBRANT HEALTH FITNESS FORUM

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


  11. 2010-04-04 유용한 링크 | We are connected

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


  12. CSS Brigit | Jquery Tutorial : Toggle Effect on Hover/Click

    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….


  13. How To Use SSH For All Devices On 3.1.2 Firmware | cheapax.info

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


  14. 180+ Got to Check Out Fresh Articles for Designers and Developers | tripwire magazine

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


  15. Internet Marketing Online Sales Boosting Toolbox Software. | Launch Bonus Net

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


  16. Kyle W

    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


  17. wespai

    Good Job


  18. Jquery Tutorial : Toggle Effect on Hover or Click | AcrisDesign | Source code bank

    [...] Link: Jquery Tutorial : Toggle Effect on Hover or Click | AcrisDesign [...]


  19. jQuery Tutorial : Toggle Effect on Hover or Click | Design Newz

    [...] jQuery Tutorial : Toggle Effect on Hover or Click [...]


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

    [...] jQuery Tutorial : Toggle Effect on Hover or Click jQuery Tutorial : Toggle Effect on Hover or Click [...]


  21. andrew.wong.p.k – 8 must see elegant yet simple JQuery

    [...] Tutorial by Acris Design. Works great for FAQ [...]


  22. jQuery Tutorial : Toggle Effect on Hover or Click » blog.lanche86.com

    [...] 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 [...]


  23. 180+ Got to Check Out Fresh Articles for Designers and Developers | morlandotech.com

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


  25. logo design

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


  26. Best of Amazing jQuery Tutorials April 2010 « Defonic International Solutions

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


  27. Duniya Tv LIVE

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


  28. Maykel Barcala

    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


  29. You are now listed on FAQPAL

    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….


  30. diabete

    I like the way you have it laid out, Diabete Diabete


  31. online website design

    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.


  32. Adwords google es

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


  33. Flitz

    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?


  34. Home Remedies

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


  35. Alex

    This is great…

    Can anyone help me to make the ‘Toggle Effect On Click’ toggle.js slide the old content away when a new header is clicked.

    I tried:

    $(document).ready(function(){
    //Hide the tooglebox when page load
    $(“.togglebox”).hide();
    //slide up and down when click over heading 2
    $(“h2″).click(function(){

    //I ADDED THIS BIT
    $(“.togglebox”).hide();

    // slide toggle effect set to slow you can set it to fast too.
    $(this).next(“.togglebox”).slideToggle(“slow”);
    return true;
    });
    });

    But it hide instantly and looked a bit amateur!
    Hope someone figures it.
    Thanks


  36. Logo Design

    Great tutorial; This is really great…keep it up !!


  37. 60 Useful JQuery Tutorials From 2010 | AcrisDesign

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


  38. 60个有用的jQuery教程

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


  39. Brett Widmann

    This is a great tutorial! Everything works and it looks great! Thanks for sharing.


  40. Custom Logo Design

    Thanks so much! I have been trying to learn this!


  41. Absolutely Amazing Techniques To Create Eye-Catching Websites With JQuery (Best Of 2010) | Free and Useful Online Resources for Designers and Developers

    [...] with jQuery( Demo | Download )Tabbed Content with Navigation using jQuery UI( Demo | Download )Toggle Effect on Hover/Click( Demo | Download )Create animated vertical Menu Using Jquery( Demo | Download )Creating an [...]


  45. Tim

    Thanks for sharing the tutorial, helped me a lot for hover click effect.


  46. Maida

    Hi

    Nice tutorial.
    I have to ask one thing that can we show first(top) or all links on page load? I tried with this

    $(“.togglebox”).show();

    but it didn’t work.


  47. Insurance Group UK

    this is very great script of Jquery, i was wanted this hover script.
    This blog is Awesome


  49. Kenty Le

    Pretty good. tks :-)


  50. email campaign

    This is a great blog posting and very useful. I really appreciate the research you put into it.

Newer Comments »

Leave a Reply