Simple Accordion Plugin For jQuery - zAccordion

zAccordion is a simple and use-to-use Accordion Plugin built with jQuery that allows you to implement horizontal accordion effects into your websites.

How to use it:

1. Include jQuery library and necessary javacripts

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="js/jquery.zaccordion.js"></script>

2. The Html

<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>

3. Javascript

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

4. Options available.

// Time between each slide (in ms). 
timeout: 6000, 

// Width of the container. This option is required. 
width: null, 

// Width of each slide in pixels or width of each slide compared to a 100% container. 
slideWidth: null, 

// Width of each slide's "tab" (when clicked it opens the slide) or width of each tab compared to a 100% container. 
tabWidth: null, 

// Height of the container. This option is required. 
height: null, 

// Zero-based index of which slide should be displayed. 
startingSlide: 0, 

// Class prefix of each slide. If left null, no classes will be set. 
slideClass: null, 

// Easing method. 
easing: null, 

// Speed of the slide transition (in ms). 
speed: 1200, 

// Whether or not the slideshow should play automatically. 
auto: true, 

// Event type that will bind to the "tab" (click, mouseover, etc.). 
trigger: "click", 

// Pause on hover. 
pause: true, 

// Whether or not to invert the slideshow, 
// so the last slide stays in the same position, rather than the first slide.
invert: false,  

// Function called when animation starts. 
animationStart: function () {}, 

// Function called when animation completes. 
animationComplete: function () {}, 

// Function called after the accordion is finished building. 
buildComplete: function () {}, 

// Display zAccordion specific errors. 
errors: false 

5. Public methods

// Start the accordion. 
start 

// Stop the accordion. 
stop 

// Trigger a specific slide. 
trigger 

// Destroys accordion, unbinds events, and removes styles. 
destroy 

Change log:

2015-03-06

• The "animationStart" and "animationComplete" event handlers are passed the subject of the animation.

---

This awesome jQuery plugin is developed by natearmagost. For more Advanced Usages, please check the demo page or visit the official website.