▲ #accordion1
Classic slideshow

As you can see from these demos, Accordionza is very flexible jQuery plugin. While providing a solid accordion base code, it leaves you the freedom to design an accordion the way you want.

Some of the most notable features: autoplaying functionality with the option to pause on hover and autorestart, customizable effects and speed, collapsable captions, keyboard navigation, and more.

▶ #accordion2
Feature boxes

▼ #accordion3
News ticker

Installation

Step 1 · Load the script

For starters, you include the required javascript files in the <head> of your HTML document. 

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script><!-- optional -->
<script type="text/javascript" src="path/to/your/jquery.accordionza.min.js"></script>

Note that in the snippet above, I am loading a Google hosted jQuery copy. You can host it yourself too. Also, I am loading the jQuery Easing Plugin for additional easing effects. This file is optional. Finally, you load the Accordionza Plugin. Remember to change the src path to match the location of the file on your server.

Step 2 · Create your accordion

The Accordionza Plugin is very flexible. As you can see from the demos, it allows you to design your accordion the way you want. Doing so, obviously requires some HTML and CSS skills; however, the three demos are fully included and ready to easily be “copied and pasted”.

HTML

The HTML for each demo accordion can be found in the standalone demos:

The base of each accordion is a simple HTML list (<ul>), with each list item (<li>) being a slide. From there on you are free to design the accordion however you want. Just keep in mind some predefined CSS classes exist for certain parts of the slides. Via the options you can rename every class if you need to.

CSS

The CSS for each demo accordion can be found here:

If you are using different accordions on the same page, you may want to combine the CSS into a single file. In any case, be sure to link to your stylesheet in the <head> of your HTML document. 

<link rel="stylesheet" type="text/css" href="path/to/your/style.css" />

Step 3 · Showtime!

JavaScript

The JavaScript for each demo accordion can be found here:

Finally, all that is left to do, is to connect your accordion with the Accordionza Plugin. Append the following piece of javascript to the <head> of your HTML file. Alternatively, you could move it to an external file. 

<script type="text/javascript">
$(document).ready(function() {

	$('#your_accordion').accordionza({
		// Define any options here
		autoPlay: true,
		slideDelay: 4000
		// ...
	});

});
</script>

Feel free to look at the source of this page if you want a complete and live example. Have fun!

Options

Options listed in alphabetical order

Option Description
autoPlay boolean · Default: false
Set to true to automatically start playing the slideshow. You can set the delay between each slide via the slideDelay option.
autoRestartDelay boolean · Default: false
If autoPlay is enabled, and the user triggers a slide manually, you can define after how many milliseconds (e.g. 10000) the slideshow should restart playing automatically again. Note that the slideDelay value gets added to this value. Set to false to not restart autoplaying.
captionDelay integer · Default: 0
The amount of time (in milliseconds) to wait for the caption to appear. A value of 0 will bring up the caption simultaneously with the opening slide.
captionEasing string · Default: 'swing'
The easing function to use for the caption animation.
captionHeight integer · Default: 50
The height of the caption (in pixels).
captionHeightClosed integer · Default: 0
The height of the caption when it is closed (in pixels).
captionSpeed integer · Default: 500
The duration (in milliseconds) of the caption animation.
classCaption string · Default: 'slide_caption'
The CSS class used for the caption.
classCaptionCollapsed string · Default: 'slide_caption_collapsed'
The CSS class that gets added to a collapsed caption.
classCaptionToggle string · Default: 'slide_caption_toggle'
The CSS class used for the link that hides/shows the caption.
classHandle string · Default: 'slide_handle'
The CSS class used for the slide handles, e.i. the part of each slide that remains visible when it is closed.
classSlideOpened string · Default: 'slide_opened'
The CSS class used for the currently opened slide.
navKey boolean · Default: false
Set to true to enable basic keyboard navigation through the accordion. The left and right arrows keys allow you to trigger the previous and next slide.
onSlideClose callback · Default: null
Callback that is fired when a new slide gets opened. The closing slide is available as this in your callback function.
onSlideOpen callback · Default: null
Callback that is fired when a new slide gets opened. The opening slide is available as this in your callback function.
pauseOnHover boolean · Default: false
Set to true to pause the slideshow when the user hovers over the accordion. Only applicable if autoPlay is enabled.
slideDelay integer · Default: 5000
The amount of time (in milliseconds) to display each slide. Only applicable if autoPlay is enabled.
slideEasing string · Default: 'swing'
The easing function to use for the slide animation.
slideSpeed integer · Default: 500
The duration (in milliseconds) of the slide animation.
slideTrigger string · Default: 'click'
The event that triggers a slide to be opened. Typically set to either 'click' or 'mouseover'.
slideWidthClosed integer or false · Default: false
The width of a closed slide (in pixels). A value of false will automatically attempt to retrieve the correct width by looking at the width of the handle of a closed slide.
startSlide integer · Default: 1
Available since v1.1. The number of the slide that needs to open first when the page loads.

Global defaults

You can easily change the default values for the options listed above. Just include the following javascript. This only needs to be called once. Of course, you can set all options to whatever you like. 

$.fn.accordionza.defaults = {
	captionEasing: 'easeOutBounce', // effect from the Easing Plugin
	slideTrigger:  'mouseover'
	// Etcetera
}

Event hooks

Event Description
accordionza_slide Triggers when a new slide gets opened, at the same time the onSlideClose and onSlideOpen callbacks are executed.

You can attach your own handlers to these events using jQuery's .bind() method. 

$('#foo').bind('accordionza_slide', function() {
	console.log('Opening another slide...');
});
Top
© Copyright 1984–2024, Geert De Deckere