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>
    													<image src="diner.jpg" alt="Old School Diner" />
    												</li>
    												<li>
    													<image src="pool.jpg" alt="Vintage Pool" />
    												</li>
    												<li>
    													<image src="gas.jpg" alt="Retro Gas Pump" />
    												</li>
    												<li>
    													<image 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.