Posted By

reynish on 09/15/11


Tagged

css html jquery accordion


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

spee66


My accordions


 / Published in: jQuery
 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!--
  5. <script class="jsbin" src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js"></script>
  6. -->
  7. <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  8. <script class="jsbin" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
  9. <meta charset=utf-8 />
  10. <title>JS Bin</title>
  11. <!--[if IE]>
  12. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  13. <![endif]-->
  14. <style>
  15. article, aside, figure, footer, header, hgroup,
  16. menu, nav, section { display: block; }
  17.  
  18. h3 { margin: 0; padding: 10px 0;}
  19.  
  20.  
  21. /* ACCORDION STYLES */
  22. .accordionSection {
  23. overflow: hidden;
  24. margin-bottom: 10px;
  25. border-radius: 3px;
  26. border: 1px solid #d5d5d5;
  27. }
  28.  
  29. .accordionSection.open {
  30. background-color: #E5F6FF;
  31. }
  32.  
  33. .accordionSection:hover {
  34. border-color: #C6E5F8;
  35. }
  36.  
  37. .accordionTitle {
  38. margin: 0;
  39. padding: 5px 20px;
  40. cursor: pointer;
  41. color: #004FB6;
  42. /*background-image: url(../images/plus-minus.png);*/
  43. background-image: url(http://localhost:3000/Content/css/../images/plus-minus.png);
  44. background-repeat: no-repeat;
  45. background-position: 97% -54px;
  46. }
  47.  
  48. .accordionSection.open .accordionTitle{
  49. background-position: 97% 11px;
  50. }
  51.  
  52. .accordionTitle:hover {
  53. background-color: #E5F6FF;
  54. }
  55.  
  56. .accordionTitle h3 { padding: 0; display: inline-block; min-width: 160px; margin-right: 20px; }
  57. .ie6 .accordionTitle h3 { min-width: 160px; width: auto; }
  58.  
  59. .accordionContent {
  60. margin: 0;
  61. padding: 0 20px;
  62. }
  63.  
  64. /* ACCORDION BEHAVIOURS */
  65. /* Hide accordion content in closed sections */
  66. .accordionSection.closed .accordionContent{
  67. display: none;
  68. }
  69. /* Fix for parents & children */
  70. .accordionSection.open .accordionSection.closed .accordionContent {
  71. display: none;
  72. }
  73. /* Show accordion content in open sections */
  74. .accordionSection.open .accordionContent {
  75. display: block;
  76. }
  77. /* Fix for parents & children */
  78. .accordionSection.closed .accordionSection.open .accordionContent{
  79. display: block;
  80. }
  81.  
  82.  
  83.  
  84. </style>
  85. </head>
  86. <body>
  87. <section class="accordionSection closed">
  88. <div class="accordionTitle">
  89. <h3>accordionTitle</h3>
  90. </div>
  91. <div class="accordionContent">
  92. <h3>Accordion title</h3>
  93. <p>Just some content</p>
  94. </div>
  95. </section>
  96.  
  97. <section class="accordionSection open">
  98. <div class="accordionTitle">
  99. <h3>accordionTitle</h3>
  100. </div>
  101. <div class="accordionContent">
  102. <h3>Accordion title</h3>
  103. <p>Just some content</p>
  104. </div>
  105. </section>
  106.  
  107. <section class="accordionSection closed">
  108. <div class="accordionTitle">
  109. <h3>accordionTitle</h3>
  110. </div>
  111. <div class="accordionContent">
  112. <h3>Accordion title</h3>
  113. <p>Just some content</p>
  114. <section class="accordionSection closed">
  115. <div class="accordionTitle">
  116. <h3>accordionTitle</h3>
  117. </div>
  118. <div class="accordionContent">
  119. <h3>Accordion title</h3>
  120. <p>Just some content</p>
  121. </div>
  122. </section>
  123. <section class="accordionSection closed">
  124. <div class="accordionTitle">
  125. <h3>accordionTitle</h3>
  126. </div>
  127. <div class="accordionContent">
  128. <h3>Accordion title</h3>
  129. <p>Just some content</p>
  130. </div>
  131. </section>
  132. </div>
  133. </section>
  134.  
  135. <script>
  136.  
  137. $.fn.showAccordion = function() {
  138.  
  139. }
  140.  
  141. $(document).ready(function(){
  142.  
  143. $(".accordionTitle").click(function(event) {
  144. // Cache some shizzle
  145. var thisTitle = $(this);
  146. var thisContent = thisTitle.next(".accordionContent");
  147. var thisParent = thisTitle.parent(".accordionSection");
  148. var thisSiblings = thisParent.siblings(".accordionSection");
  149.  
  150. // Close sibling accordion sections
  151. thisSiblings.each(function(){
  152. if ($(this).is(".open")) {
  153. $(this).switchClass("open", "closed");
  154. $(this).children(".accordionContent").slideUp(150);
  155. }
  156. });
  157.  
  158. // Show this accordion section
  159. if (thisParent.is(".closed")) {
  160. thisParent.removeClass("closed").addClass("open");
  161. thisContent.slideDown(150);
  162. } else {
  163. thisParent.removeClass("open").addClass("closed");
  164. thisContent.slideUp(150);
  165. }
  166.  
  167. });
  168.  
  169. });
  170. </script>
  171.  
  172. </body>
  173. </html>

Report this snippet  

You need to login to post a comment.