Posted By

sdxxx on 03/28/11


Tagged

jquery


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

Bambo


Jquery Tutorial : Toggle Effect on Hover/Click


 / Published in: jQuery
 

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

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

Report this snippet  

You need to login to post a comment.