Posted By

ksantoshp on 11/28/09


Tagged

toggle jquery collapse expand


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

ganshoot


Jquery toggle collapse expand


 / Published in: PHP
 

URL: http://www.sohtanaka.com/web-design/examples/toggle/

Jquery toggle collapse expand

  1. HTML
  2.  
  3. <h2 class="trigger"><a href="#">Toggle Header</a></h2>
  4. <div class="toggle_container">
  5. <div class="block">
  6. <h3>Content Header</h3>
  7. <!--Content-->
  8. </div>
  9. </div>
  10.  
  11.  
  12.  
  13. CSS
  14.  
  15. h2.trigger {
  16. padding: 0 0 0 50px;
  17. margin: 0 0 5px 0;
  18. background: url(h2_trigger_a.gif) no-repeat;
  19. height: 46px;
  20. line-height: 46px;
  21. width: 450px;
  22. font-size: 2em;
  23. font-weight: normal;
  24. float: left;
  25. }
  26. h2.trigger a {
  27. color: #fff;
  28. text-decoration: none;
  29. display: block;
  30. }
  31. h2.trigger a:hover { color: #ccc; }
  32. h2.active {background-position: left bottom;} /*--When toggle is triggered, it will shift the image to the bottom to show its "opened" state--*/
  33. .toggle_container {
  34. margin: 0 0 5px;
  35. padding: 0;
  36. border-top: 1px solid #d6d6d6;
  37. background: #f0f0f0 url(toggle_block_stretch.gif) repeat-y left top;
  38. overflow: hidden;
  39. font-size: 1.2em;
  40. width: 500px;
  41. clear: both;
  42. }
  43. .toggle_container .block {
  44. padding: 20px; /*--Padding of Container--*/
  45. background: url(toggle_block_btm.gif) no-repeat left bottom; /*--Bottom rounded corners--*/
  46. }
  47.  
  48.  
  49.  
  50.  
  51. jQuery
  52. We will now activate this toggle effect with some simple jQuery.
  53.  
  54. $(document).ready(function(){
  55.  
  56. //Hide (Collapse) the toggle containers on load
  57. $(".toggle_container").hide();
  58.  
  59. //Switch the "Open" and "Close" state per click
  60. $("h2.trigger").toggle(function(){
  61. $(this).addClass("active");
  62. }, function () {
  63. $(this).removeClass("active");
  64. });
  65.  
  66. //Slide up and down on click
  67. $("h2.trigger").click(function(){
  68. $(this).next(".toggle_container").slideToggle("slow");
  69. });
  70.  
  71. });

Report this snippet  

You need to login to post a comment.