zAccordion


zAccordion is a horizontal accordion plugin for jQuery. Download it now.

The latest version of zAccordion is Version 2.1.0.

Examples

Implementation

  • The HTML is pretty straightforward. In the accordion above, I use an unordered list. Each list-item contains an image.

                          <ul id="featured">
                            <li>
                              <img src="diner.jpg" alt="Old School Diner" />
                            </li>
                            <li>
                              <img src="pool.jpg" alt="Vintage Pool" />
                            </li>
                            <li>
                              <img src="gas.jpg" alt="Retro Gas Pump" />
                            </li>
                            <li>
                              <img src="car.jpg" alt="Old Car Steering Wheel" />
                            </li>
                          </ul>
                        
  • The JavaScript below builds the actual accordion.

                          $(document).ready(function() {
                            $("#featured").zAccordion({ 
                              easing: 'easeOutBounce',
                              timeout: 5500,
                              slideWidth: 600,
                              width: 900,
                              height: 310
                            });
                          });
                        
                            $(document).ready(function() {
                              $("#featured").zAccordion({ 
                                easing: 'easeOutBounce',
                                timeout: 5500,
                                slideWidth: 460,
                                width: 700,
                                height: 235
                              });
                            });
                          

Configuration

  • The plugin can be further customized by tweaking any of the options below:

                          timeout: 6000, /* Time between each slide (in ms). */
                          width: null, /* Width of the container. This option is required. */
                          slideWidth: null, /* Width of each slide in pixels or width of each slide compared to a 100% container. */
                          tabWidth: null, /* Width of each slide's "tab" (when clicked it opens the slide) or width of each tab compared to a 100% container. */
                          height: null, /* Height of the container. This option is required. */
                          startingSlide: 0, /* Zero-based index of which slide should be displayed. */
                          slideClass: null, /* Class prefix of each slide. If left null, no classes will be set. */
                          easing: null, /* Easing method. */
                          speed: 1200, /* Speed of the slide transition (in ms). */
                          auto: true, /* Whether or not the slideshow should play automatically. */
                          trigger: "click", /* Event type that will bind to the "tab" (click, mouseover, etc.). */
                          pause: true, /* Pause on hover. */
                          invert: false, /* Whether or not to invert the slideshow, so the last slide stays in the same position, rather than the first slide. */
                          animationStart: function () {}, /* Function called when animation starts. */
                          animationComplete: function () {}, /* Function called when animation completes. */
                          buildComplete: function () {}, /* Function called after the accordion is finished building. */
                          errors: false /* Display zAccordion specific errors. */
                        
  • The plugin will also accept the following methods:

                          start /* Start the accordion. */
                          stop /* Stop the accordion. */
                          trigger /* Trigger a specific slide. */
                          destroy /* Destroys accordion, unbinds events, and removes styles. */
                        

For more information on using methods, please refer to the examples files included in the Download.

Download

jQuery zAccordion comes with the JavaScript files (minimized and non-minimized) as well as some examples.

Download the latest version. Check it out on GitHub.

Release Notes

As of the new version 2.1.0, zAccordion will not be tested in Internet Explorer 6 or Internet Explorer 7. zAccordion is supported in Internet Explorer 8 and the latest builds of Firefox, Chrome, and Safari.

Version 2.1.0 — September 26, 2012

  • Added a destroyComplete option that is available after the accordion is destroyed.
  • Renamed afterBuild to buildComplete to align with naming conventions.
  • Fixed a small display issue with list-items inheriting a text-indent property.
  • Suppressed zAccordion specific errors. Errors can be enabled with errors: true.

Version 2.0.0 — September 18, 2011

As of the new version 2.0.0, zAccordion's options have changed. zAccordion was also rebuilt to follow jQuery's best practices in Plugin Authoring.

  • New plugin structure.
  • Cleaned up non-minimized code to confine to JSLint standards.
  • Added support for percentages when defining height and width.
  • Fixed an issue with the pause option stopping accordion even when set to false.
  • Many smaller bug fixes and optimizations as well as error checking.

Version 1.1.2 — June 12, 2011

  • Added a function named afterBuild that will fire once the accordion is ready.

Version 1.1.1 — May 17, 2011

  • Fixed an issue with events building up.
  • Fixed an issue with slides automatically rotating after being triggered even if auto was set to false.

Version 1.1.0 — March 20, 2011

  • Added an option to invert the slides (right slide on bottom, left slide on top).
  • Added a class to the previously opened slide.

Version 1.0.1 — January 10, 2011

  • Fixed an issue with child elements breaking timer.

Version 1.0.0 — December, 2010

  • First release.