Advanced Search

Jquery Tutorial : Toggle Effect on Hover/Click

/ Published in: jQuery
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <h2>Move Cursor</h2>
  2. <div class="togglebox">
  3. <div class="content">
  4. <h3>Content Here</h3>
  5. <!--Content Here--></div>
  6. </div>
  7.  
  8.  
  9.  
  10. Step 2 : Styling Our HTML Document
  11.  
  12. Now we need to style our html elements like heading, togglebox and content. See the codes below.
  13.  
  14.  
  15. h2 {
  16. 	padding:10px;
  17. 	font-size:20px;
  18. 	color:#243953;
  19. 	background-color:#fafafa;
  20. 	border: 1px solid #a9a9a9;
  21. 	-moz-border-radius: 7px; /* Rounder Corner */
  22.        -webkit-border-radius: 7px;
  23. 	-khtml-border-radius: 7px;
  24. 	text-align:center;
  25. 	font-family:Georgia, "Times New Roman", Times, serif;
  26. 	margin-bottom:5px;
  27. }
  28. .togglebox {
  29. 	background-color:#CCC;
  30. 	border: 1px solid #a9a9a9;
  31. 	/* Rounder Corner */
  32. 	-moz-border-radius: 7px;
  33.         -webkit-border-radius: 7px;
  34. 	-khtml-border-radius: 7px;
  35. 	overflow: hidden;
  36. 	font-size: 1.2em;
  37. 	width: 295px;
  38. 	clear: both;
  39. 	margin-bottom:10px;
  40. }
  41. .togglebox .content {
  42. 	padding: 20px;
  43. }
  44.  
  45.  
  46.  
  47.  
  48.  
  49. Step 3 : Jquery Time
  50.  
  51. Create a new JS file and then Link Jquery and new js file to Html document
  52.  
  53.  
  54. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"><!--mce:0--></script>
  55. <script src="toggle.js" type="text/javascript"><!--mce:1--></script>
  56.  
  57.  
  58. 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.
  59.  
  60.  
  61.  
  62.  
  63. Toggle Effect On Hover
  64.  
  65. $(document).ready(function(){
  66. //Hide the tooglebox when page load
  67. $(".togglebox").hide();
  68. //slide up and down when hover over heading 2
  69. $("h2").hover(function(){
  70. // slide toggle effect set to slow you can set it to fast too.
  71. $(this).next(".togglebox").slideToggle("slow");
  72. return true;
  73. });
  74. });
  75.  
  76.  
  77.  
  78.  
  79. Toggle Effect On Click
  80.  
  81. $(document).ready(function(){
  82. //Hide the tooglebox when page load
  83. $(".togglebox").hide();
  84. //slide up and down when click over heading 2
  85. $("h2").click(function(){
  86. // slide toggle effect set to slow you can set it to fast too.
  87. $(this).next(".togglebox").slideToggle("slow");
  88. return true;
  89. });
  90. });

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.