Advanced Search

Jquery toggle collapse expand

/ Published in: PHP
Save to your folder(s)
Jquery toggle collapse expand

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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. });

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.