My first jQuery plugin: A simple Accordion
I’ve been using jQuery for quite some time now, but never took the time to try and write my own plugin.
Today i did and as an example i wrote a simple accordion plugin.
It’s probably far from perfect and i know there’s one in the jQuery UI library, but maybe you don’t want your clients to download an extra 200k just for an accordion…
Anyways, the plugin has four parameters:
1. speed: for expanding/collapsing the container;
2. index: container to open on default;
3. trigger: the trigger element (defaults to an h2 element);
4. container: the html element used as container (defaults to a div, but can for example also be an ul);
// ************************************************************** // simpleAccordion v1.0.0 // // simpleAccordion is my first try at writing jQuery plugins // it provides a means for displaying a so called 'accordion' view // mostly used in navigation, but can be used otherwise. // // Author : Richard van den Winkel // Website : http://www.vandenwinkel.com/jquery/simpleAccordion // E-mail : richardvandenwinkel@gmail.com // Releasedate : May 13 2009 // Version : 1.0.0 // ************************************************************** /* --- An example --- html: <div class="accordion"> <h2>trigger</h2> <ul> <li>item</li> <li>item</li> <li>item</li> </ul> <h2>trigger</h2> <ul> <li>item</li> <li>item</li> <li>item</li> </ul> </div> function call: <script type="text/javascript"> $(document).ready(function() { $('.accordion').simpleAccordion({ speed: 'fast', container: 'ul' }); }); </script> */ ;(function($) { $.fn.simpleAccordion = function(o) { // default settings var o = $.extend({ trigger: 'h2', container: 'div', speed: 'slow', index: 0 }, o); return this.each(function() { // this => the accordion container var $this = this; // Variable for the current open item $this.curThis = ""; // Set trigger cursor to pointer $(this).find(o.trigger).css('cursor', 'pointer'); // Default close all item containers $(this).find(o.trigger).next(o.container).hide(); // Add click logic to all triggers $(this).find(o.trigger).click(function() { if ($this.curThis != "") { $($this.curThis).next(o.container).toggle(o.speed); } var newThis = this; if ($this.curThis == newThis) { $this.curThis = ""; } else { $this.curThis = newThis; $(newThis).next(o.container).toggle(o.speed); } }); // try to open the container with the corresponding index (if there are any...) if ($(this).find(o.trigger).length > 0) { if (o.index < $(this).find(o.trigger).length) { $(this).find(o.trigger + ':eq(' + o.index + ')').click(); } else { $(this).find(o.trigger + ':first').click(); } } }); }; })(jQuery);
You can view an example here: http://www.vandenwinkel.com/jquery/simpleAccordion/
comments
No comments yet.
Sorry, the comment form is closed at this time.