jQuery Accordion plugin


/ Published in: jQuery
Save to your folder(s)

This is a simple accordion plugin that i wrote. Hope it comes in handy.


Copy this code and paste it in your HTML
  1. /*
  2.  * jQuery Plugin name : Accordion
  3.  * descriptions : A simple jQuery Accordion plugin
  4.  * created by : Neil Pearce on 13/6/2011
  5.  * URL : http://www.neilrpearce.co.uk
  6.  *
  7.  * 1. The defaults variable is an object that acts like an array with aBtn, aContent and active as the
  8.  * keys and each hold a value that we will use as a CSS class. We then merge 'options' with 'defaults'
  9.  * and add them to the jQuery object for later use using the $.extend() method.
  10.  *
  11.  * 2. This doesn't need to be here and is only used to open up a panel by default.
  12.  * To keep things simple i have declared a variable 'o' and stored the options within. Then we hide all panels with
  13.  * the class of 'content' and we then loop over the main buttons(aBtn) using the each() method to see which is
  14.  * active(has a class of open)and then open up it's siblings(in this case a table) using the slideDown() method.
  15.  *
  16.  * 3. Using the variable 'obj' we check to see what button(aBtn) has been clicked and see if it has a class of 'open'. If
  17.  * it has, we set it to false and close it up, but if it doesn't we add the class and open it up. Simple hey!
  18.  *
  19.  *
  20.  */
  21.  
  22. /* Usage - also see bottom of snippet
  23.  
  24.   $("#accordion").accordion();
  25.  
  26. */
  27.  
  28. (function($){
  29.  
  30. // #1
  31. $.fn.accordion = function(options) {
  32. // set some defaults
  33. var defaults = {
  34. aBtn: 'btn',
  35. aContent: 'content',
  36. active: 'open'
  37. },
  38.  
  39. // merge together
  40. options = $.extend({}, defaults, options);
  41.  
  42. // #2
  43. var o = options;
  44.  
  45. $(function(){
  46. // hide all the content panels from the off
  47. $('.' +o.aContent).hide();
  48. // traverse the dom(loop over) to see which is active(has a class of open)
  49. // and then open up it's siblings(I.E table)
  50. $('.' +o.aBtn).each(function(){
  51. if($(this).hasClass(o.active)){
  52. $(this).siblings().slideDown();
  53. }
  54. });
  55. });
  56.  
  57. // #3
  58. // check for click events
  59. $('.'+o.aBtn).click(function() {
  60. var obj = $(this);
  61. // check see if we have click the currently active tab
  62. // as we won't be able to check after closing the tabs!
  63. var slide = true;
  64. if(obj.hasClass('open'))
  65. {
  66. slide = false;
  67. }
  68. // close all the current elements
  69. $('.'+o.aContent).slideUp().removeClass(o.active);
  70. $('.'+o.aBtn).removeClass(o.active);
  71.  
  72. // check if we should still slide
  73. if(slide)
  74. {
  75. // make the clicked button active and open
  76. obj.addClass(o.active);
  77. obj.siblings('.'+o.aContent).addClass(o.active).slideDown();
  78. }
  79.  
  80. // #4
  81.  
  82. return false;
  83. });
  84.  
  85. return this;
  86. };
  87.  
  88. })(jQuery);
  89.  
  90. /******* THE HTML ***************/
  91.  
  92. <ul class="accordion">
  93. <li><a href="#" class="btn open">fixtures</a>
  94. <div class="content">
  95.  
  96. <h2>Tuesday 7th June 2011</h2>
  97.  
  98. <table border="0">
  99.  
  100. <tbody>
  101.  
  102. <tr>
  103. <td class="fixt-time">15:00</td>
  104. <td class="fixt-name fixt-left">West Ham United</td>
  105. <td class="fixt-vs">vs</td>
  106. <td class="fixt-name">Sunderland</td>
  107. </tr>
  108. <tr>
  109. <td class="fixt-time">15:00</td>
  110. <td class="fixt-name fixt-left">Stoke City</td>
  111. <td class="fixt-vs">vs</td>
  112. <td class="fixt-name">Wigan Athletic</td>
  113. </tr>
  114. <tr>
  115. <td class="fixt-time">15:00</td>
  116. <td class="fixt-name fixt-left">Newcastle United</td>
  117. <td class="fixt-vs">vs</td>
  118. <td class="fixt-name">West Bromwich Albion</td>
  119. </tr>
  120. <tr>
  121. <td class="fixt-time">15:00</td>
  122. <td class="fixt-name fixt-left">Everton</td>
  123. <td class="fixt-vs">vs</td>
  124. <td class="fixt-name">Chelsea</td>
  125. </tr>
  126. <tr>
  127. <td class="fixt-time">15:00</td>
  128. <td class="fixt-name fixt-left">Manchester United</td>
  129. <td class="fixt-vs">vs</td>
  130. <td class="fixt-name">Blackpool</td>
  131. </tr>
  132. <tr>
  133. <td class="fixt-time">15:00</td>
  134. <td class="fixt-name fixt-left">Fulham</td>
  135. <td class="fixt-vs">vs</td>
  136. <td class="fixt-name">Arsenal</td>
  137. </tr>
  138. <tr>
  139. <td class="fixt-time">15:00</td>
  140. <td class="fixt-name fixt-left">Aston Villa</td>
  141. <td class="fixt-vs">vs</td>
  142. <td class="fixt-name">Liverpool</td>
  143. </tr>
  144. <tr>
  145. <td class="fixt-time">15:00</td>
  146. <td class="fixt-name fixt-left">Tottenham Hotspur</td>
  147. <td class="fixt-vs">vs</td>
  148. <td class="fixt-name">Birmingham City</td>
  149. </tr>
  150. <tr>
  151. <td class="fixt-time">15:00</td>
  152. <td class="fixt-name fixt-left">Wolverhampton Wanderers</td>
  153. <td class="fixt-vs">vs</td>
  154. <td class="fixt-name">Blackburn Rovers</td>
  155. </tr>
  156. <tr>
  157. <td class="fixt-time">15:00</td>
  158. <td class="fixt-name fixt-left">Bolton Wanderers</td>
  159. <td class="fixt-vs">vs</td>
  160. <td class="fixt-name">Manchester City</td>
  161. </tr>
  162.  
  163. </tbody>
  164.  
  165. </table>
  166.  
  167. </div>
  168. </li>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.