Advanced Search

jQuery Horizontal Accordion

/ Published in: HTML
Save to your folder(s)
This is a pretty simple accordion. Good for listing team members or something like that.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <html>
  2.  
  3. <!----------------------------------------------------
  4. Welcome to the jQuery accordion by Robert Picard.
  5.  
  6. Visit robert.im and follow me on Twitter @IAmRobertPicard
  7. to see what I'm doing.
  8.  
  9. Seriously, follow me.
  10. ------------------------------------------------------>
  11.  
  12. 	<head>
  13.  
  14. <!-- Add this CSS to your stylesheet -->
  15.  
  16. 		<style type="text/css">
  17.  
  18. 		body
  19. 		{
  20. 			background-color: #c0c0c0;
  21. 		}
  22.  
  23. 		.accordion_box
  24. 		{
  25. 			width: 100px;
  26. 			background-color: #39414a;
  27. 			height: 100px;
  28. 			float: left;
  29. 			border-right: 1px solid white;
  30. 			overflow: hidden;
  31. 			color: white;
  32. 			font-family: arial;
  33. 			font-size: 12px;
  34. 		}
  35.  
  36. 		#accordion_first
  37. 		{
  38. 			-moz-border-radius-bottomleft: 10px;
  39. 			-moz-border-radius-topleft: 10px;
  40. 			-webkit-border-bottom-left-radius: 10px;
  41. 			-webkit-border-top-left-radius: 10px
  42. 			border-bottom-left-radius: 10px;		
  43. 			border-top-left-radius: 10px;
  44. 		}
  45.  
  46. 		#accordion_last
  47. 		{
  48. 			-moz-border-radius-bottomright: 10px;
  49. 			-moz-border-radius-topright: 10px;
  50. 			-webkit-border-bottom-right-radius: 10px;
  51. 			-webkit-border-top-right-radius: 10px
  52. 			border-bottom-right-radius: 10px;		
  53. 			border-top-right-radius: 10px;
  54. 			border-right: none;
  55. 		}
  56.  
  57. 		.accordion_img
  58. 		{
  59. 			margin: 10px;
  60. 			float: left;
  61. 		}
  62.  
  63. 		.accordion_box p
  64. 		{
  65. 			float: left;
  66. 		}
  67.  
  68. 		</style>
  69.  
  70. <!-- I'm using jQuery library hosted on Google but you can change that
  71. to another mirror or download it yourself at jQuery.com -->
  72.  
  73. 		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
  74.  
  75. 		<script type="text/javascript">
  76.  
  77. 	$(document).ready(function(){
  78.  
  79. 	$("#accordion_first").css("border-bottom-left-radius", "10px"); // For better cross-browser compatibility
  80. 	$("#accordion_first").css("border-top-left-radius", "10px");
  81.  
  82. 	$("#accordion_last").css("border-bottom-right-radius", "10px");
  83. 	$("#accordion_last").css("border-top-right-radius", "10px");
  84.  
  85. 	$('.accordion_box').click(function(){ // When the accordion box is clicked...
  86. 		if ($(this).width() == 100) // and the width of the clicked box is 100px...
  87. 		{
  88. 			$(this).animate({width:300}, "fast"); // open it to 300px...
  89. 			$(this).siblings().animate({width:100}, "fast"); // and close any other open boxes.
  90. 		}	
  91. 	});
  92.  
  93. 	$('.accordion_box').dblclick(function() { // If the accordion box is double clicked...
  94. 		if ($(this).width() == 300) // and the clicked box is open...
  95. 		{
  96. 			$(this).animate({width:100}, "fast"); // close it.
  97. 		}
  98. 	});
  99. });
  100.  
  101. 		</script>
  102. 	</head>
  103.  
  104. 	<body>
  105.  
  106. 	<div class="accordion_box" id="accordion_first"> <!-- Note the id of the first box, #accordion_first -->
  107. 		<img class="accordion_img" src="img/img.jpg" width="80" height="80" />
  108. 		<p><b>Robert</b><br />
  109. 		<br />
  110. 		Testing some text.</p>
  111. 	</div>
  112.  
  113. 	<div class="accordion_box">
  114. 		<img class="accordion_img" src="img/img2.jpg" width="80" height="80" />
  115. 		<p><b>Robert</b><br />
  116. 		<br />
  117. 		Testing some text.</p>
  118. 	</div>
  119.  
  120. 	<div class="accordion_box">
  121. 		<img class="accordion_img" src="img/img.jpg" width="80" height="80" />
  122. 		<p><b>Robert</b><br />
  123. 		<br />
  124. 		Testing some text.</p>
  125. 	</div>
  126.  
  127. 	<div class="accordion_box">
  128. 		<img class="accordion_img" src="img/img2.jpg" width="80" height="80" />
  129. 		<p><b>Robert</b><br />
  130. 		<br />
  131. 		Testing some text.</p>
  132. 	</div>
  133.  
  134. 	<div class="accordion_box" id="accordion_last"> <!-- Note the id of the last box, #accordion_last -->
  135. 		<img class="accordion_img" src="img/img.jpg" width="80" height="80" />
  136. 		<p><b>Robert</b><br />
  137. 		<br />
  138. 		Testing some text.</p>
  139. 	</div>
  140.  
  141. <!-- It doesn't matter how many boxes you have, just make the sure the
  142. first and last boxes are identified with #accordion_first and
  143. #accordion_last respectively. -->
  144.  
  145. 	</body>
  146. </html>

URL: http://screenr.com/91f

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.