Posted By

robertdotim on 02/14/11


Tagged

accordion


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

robertdotim
deadlow


jQuery Horizontal Accordion


 / Published in: HTML
 

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

This is a pretty simple accordion. Good for listing team members or something like that.

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

Report this snippet  

You need to login to post a comment.