Advanced Search

A Simple but Pleasing jQuery Accordion...that doesn't suck.

/ Published in: jQuery
Save to your folder(s)
While there seem to be plenty accordion examples built with jQuery, I had trouble finding one that both worked well and was easily styled. UI Tabs is a pain in the ass to modify and adds a crap load of extra DOM elements that must be accounted for when styling. I made this one simple and easy to style.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Horizontal Accordion</title>
  6. <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
  7. <style>
  8. .accordion-container {
  9. 	float: left;
  10. 	width: inherit;
  11. 	margin: 0;
  12. 	padding: 0;
  13. }
  14.  
  15. ul.accordion {
  16. 	list-style: none;
  17. 	margin: 0;
  18. 	padding: 0;
  19. }
  20.  
  21. ul.accordion li {
  22. 	float: left;
  23. 	height: 250px;
  24. 	background: #0D0D0C;
  25. 	cursor: pointer;
  26. 	overflow: hidden;
  27. }
  28.  
  29. /* Optional selected panel style */
  30. ul.accordion li.selectedPanel {
  31.  
  32. }
  33.  
  34. /* Makes content extend to panel max width */
  35. ul.accordion li .panelContent {
  36. 	display:block;
  37. }
  38.  
  39. /* Use this to style panel's inner content */
  40. ul.accordion li .panelContent .innerContent {
  41. 	font-size: 12px;
  42. 	color: #F2F2F2;
  43. 	margin: 5px;
  44. 	padding: 10px;
  45. }
  46. </style>
  47. </head>
  48. <body>
  49. <!-- A div with the class "accordion-container" wrapped around a ul with a class of "accordion" is all that this accordion requires. -->
  50. <div class="accordion-container">
  51. 	<ul class="accordion">
  52. 		<li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula ullamcorper orci sit amet varius. Nulla mauris urna, adipiscing in tempor sit amet, condimentum et dolor. Mauris et risus a nunc tincidunt malesuada. Nulla vel orci leo. Sed mattis pretium vulputate. In hac habitasse platea dictumst. Donec semper ligula eget ipsum hendrerit viverra. Nulla facilisi. Fusce feugiat imperdiet nunc, in rutrum nulla facilisis sollicitudin. Vivamus et nisl orci. Nullam interdum urna non enim congue iaculis sagittis augue sodales.</p></li>
  53. 		<li><p>Nam ut urna lacus. Donec sit amet dolor libero, in tincidunt tellus. Nam tempus interdum risus, in aliquam libero cursus at. Sed nulla eros, vehicula sed dignissim sit amet, aliquet eget neque. Proin non quam a ligula placerat molestie non iaculis nunc. Pellentesque malesuada odio id metus auctor interdum. Duis ornare ligula eu massa malesuada suscipit. Nunc ante lacus, ultrices nec dignissim nec, ultricies auctor quam. Vivamus ac justo a mauris dictum ultricies. Morbi aliquet malesuada erat, ut viverra nisi euismod et. Curabitur felis magna, laoreet id tincidunt hendrerit, tincidunt eu tortor. Ut pharetra eleifend dui quis molestie.</p> 
  54. 		<p>Quisque porttitor feugiat dui nec consectetur. Morbi consequat, augue sed aliquet vehicula, nisl mauris sagittis leo, et euismod mauris arcu vel magna. Donec consequat ligula nisl, nec vehicula felis. Nullam tempus adipiscing aliquam. Nam magna turpis, ultrices interdum mattis consectetur, tincidunt eu dolor.</p></li>
  55. 		<li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula ullamcorper orci sit amet varius. Nulla mauris urna, adipiscing in tempor sit amet, condimentum et dolor. Mauris et risus a nunc tincidunt malesuada. Nulla vel orci leo. Sed mattis pretium vulputate. In hac habitasse platea dictumst. Donec semper ligula eget ipsum hendrerit viverra. Nulla facilisi. Fusce feugiat imperdiet nunc, in rutrum nulla facilisis sollicitudin. Vivamus et nisl orci. Nullam interdum urna non enim congue iaculis sagittis augue sodales.</p></li>
  56. 	</ul>
  57. </div>
  58. </body>
  59. <script type="text/javascript" >
  60. $(document).ready(function() { 
  61. 	var accList = $("ul.accordion li");
  62. 	$(accList).filter(":first").addClass('selectedPanel');
  63. 	var maxW = $('.accordion-container').width() * 0.8;
  64. 	var minW = ($('.accordion-container').width() - maxW) / ($(accList).length - 1);
  65. 	var minH = 0;
  66.  
  67. 	$.each(accList, function(i, panel) {
  68. 		$(panel).html("<div class='panelContent'><div class='innerContent'>"+ $(panel).html() +"</div></div>");
  69. 		if(i != 0) {
  70. 			$(panel).css("width", minW+"px");
  71. 		} else {
  72. 			$(panel).css("width", maxW+"px");	
  73. 		}
  74. 	});
  75. 	$("ul.accordion li div.panelContent").css({"width" : maxW+"px"});
  76.  
  77. 	accList.click(function() {
  78. 		if($(this).attr("class") != "selectedPanel") {
  79. 			accList.removeClass('selectedPanel');	
  80. 			$(this).addClass('selectedPanel');
  81. 			// stop([clearQueue], [jumpToEnd]);
  82. 			$(":animated").stop(true, true);
  83. 			$(accList).filter(":not('.selectedPanel')").animate({
  84. 				width: minW+"px",
  85. 				opacity: .5
  86. 			}, "slow");
  87. 			$(this).animate({
  88. 				width: maxW+"px",
  89. 				opacity: 1
  90. 			}, "slow");
  91. 		}
  92. 	});
  93. });
  94. </script>
  95. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.