zAccordion
zAccordion is a horizontal accordion plugin for jQuery. Download it now.
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="/images/diner.jpg" width="600" height="310" alt="Old School Diner" /> </li> <li> <image src="/images/pool.jpg" width="600" height="310" alt="Vintage Pool" /> </li> <li> <image src="/images/gas.jpg" width="600" height="310" alt="Retro Gas Pump" /> </li> <li> <image src="/images/car.jpg" width="600" height="310" 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: 884,
height: 310
});
});
Options
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. */
afterBuild: function () {} /* Function called after the accordion is finished building. */
Commands
The plugin will also accept the following commands:
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 commands, please refer to the examples files included in the Download.
Examples
- A Barebones Example
- An Advanced Example - Demonstrates animationStart, animationComplete, and startingSlide
- An Inverted Accordion - Demonstrates invert
- Another Advanced Example
- Fade in the Accordion - Demonstrates afterBuild
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.
Change Log
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.
Version 2.0.0 — September 18, 2011
- 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.
Is there an issue with transparency in IE? The example here http://www.armagost.com/zaccordion/another-advanced-example/ looks perfect in Chrome, Firefox and Opera, but the transparent section is solid black in IE 8.
Hi Ian,
I use CSS3 to create the shadows. I don’t believe box-shadow is supported in IE8. You can remove the shadow rule or even try an image for IE.
Hello!
It’s wonderfull, but is there a way to make it a vertical slide?
thank you very much
Hi Mac,
At the moment I don’t have plans to create a vertical version.
Great accordion code! Much appreciated. I do have one question. I am creating a “open” function and need to know which picture was opened. I was expecting a .value or .index value to represent which picture was opened. Can you point me in the direction where i can find this?
Thanks!
Steve
Hi Steve,
With the new release you can use animationStart. For example:
animationStart: function() {
console.log($(“#accordion”).data(“current”));
}
The JavaScript above will log the current slide to the console.
is it possible to make zaccordian initially display all images partially collapsed and of all equal widths and return to this state when mouse is out off the accordian ?
thanks
Hi Chris,
If I understand the question, you want zAccordion to stretch when hovered over. Unfortunately, the plugin does not work that way because I wanted a different effect. zAccordion essentially layers one piece of content over another instead of displaying the content side by side. There is a good possibility that other plugins out there will work for you. One that comes to mind is the original MooTools accordion.
Thanks dude !
Your plugin is just awesome !
Best Regards
hi, this is an amazing accordion! i’ve been playing around with another one and it was an absolute nightmare! stumbled across yours and i am beyond impressed!
i currently have my accordion set on mouseover, i’m wondering if there is a way of getting the accordion to reset back to the starting slide if i mouse off?
thank you!
Hi Aron,
Thank you for the comments. The accordion won’t call a function on mouseout or mouseover. It is a good idea. I will take a look at that for the next release.
This is really nice – very straightforward and neat. Thanks!
Do you have any “no-js” type class that we can apply before the js kicks in, so we can hide the initial lining up of the li items?
Thanks,
Hi Tim,
In the latest release (1.1.2) I’ve added a function that fires after the accordion is built (afterBuild). See the examples.html file in the download for an example – the last accordion will fade in once everything is ready.
You could do something similar by removing a no-js class using afterBuild.
-Nate
Yay! Got it working and love it!! Works great with jquery 1.5!!!
Took a lot of trobleshooting…. The lastest jquery (1.6) causes some weird looping issues in Chrome (tried a different accordion with the same issue, but it seems like a Chrome exclusive problem) … not sure what causes the issue. When you are away from the page the autoplay seems to pause and then try to catch up when you return to the page (speedily plays the slides and won’t stop them on mouseover until it plays all the playback you missed).
Hi Megan,
I do see that issue with Chrome. I think I’ve fixed the issue in the next release. It looks like it is related to the events building up similar to the “click happy” user mentioned in another comment above.
WOW! This is the most amazing and best looking horizontal accordion script I came across. Thank you!!
Nice plugin,
I tried to emulate “click happy” user, and seems the event keep adding up. if the handler is mouse over / hover then it can hog the computer down if user is moving the mouse cursor like crazy.
IMHO it is a good idea to force user to wait for the current animation finished before they can create another animation event.
Again that is only my 2 cents.
Cheers
Hi Vic,
Good idea. I’ve added a stop() before the animation and it seems to clear up the issue. The solution is similar to the one seen here. It will roll out in the next release.
Having problems with disabling autoslideshow thingy, have set auto:false so it does not start.
but if i click the nav links it starts to slide
anyway arround this?
great work btw!
Hi skepsis,
I do see that issue. It is fixed in the upcoming release.
Thank you. This is amazing and exactly what I was looking for.
Hi! Great work, thanks! I simply love the shadow effect rendered under accordion tabs.
But I wanted to ask – is there an option where tabs in the left side of accordion is on top of those which are in the closer to right side. To be more precise – the mirrored version of this accordion above. I am using this plugin in my blog/album page, so I would like to make it look like stack of pages on the left side of desk (hovering will reveal each of them in acoordion way).
Hi,
I’ve had a couple requests for this. I am hoping to implement this feature in the next release. However, that may not be for another week or so.
- Nate
* Update this feature was released with version 1.1.0.
Hello, veeery nice script !!
I have question, how to invert “layers” (left image on top, right image on bottom)?? Thanks !!
Hi Ajdacho,
I’ve added this into the new release.
Hi,
Love the accordion! It’s nearly perfect for my needs, but I’d also like to display a text area on the closed tabs – something like the accordion at http://www.bbc.co.uk/food/
Do you have plans to add something like this? I’m new to jQuery and tried adding an extra div that would fade out when the slide became active ( inverse of the $(“#splash”).find(“li.slide-open div”).fadeIn(); call), but it ended up fading in, out and back in again.
Anyway, it looks great. Cheers for making it available.
Hi Adam,
I’ve created an example of a BBC style accordion with the latest version of zAccordion.
Thanks – best looking horizontal accordion on the net and the easiest to get working!
Buenísimo! muy simple.
Hi, awesome script. I think I’m definitely going to use this in my next project. I’m not a javascript/jquery wiz though I’m wondering what it would take to make it into a vertical accordion?
Hi Michael,
Sorry, at this time I don’t have plans to make it into a vertical accordion.
Oh, that’s wonderful.
I wonder how could I omit the slide show, using the click event only? Sorry for such a dummy’s note.
Hi Pavel,
Try setting the auto option to false. That should work.
Beautiful script. But is there any mouseOver features? Or any way to add it?
Hi Andrei,
You should be able to change the trigger option to switch slides on mouseover instead of click. The accordions packaged along with the download should have an example of this.