Simple Accordion Plugin For jQuery - zAccordion

File Size: 21 KB
Views Total: 4512
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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.