zAccordion Examples

There are a number of examples below. Each example shows the JavaScript needed to build the accordion. For HTML and CSS, please view the page source.

Example 1 - A Basic Accordion

This example demonstrates the best way to fire the accordion. Each slide contains an image measuring 600 x 270 pixels. The width of the accordion is required and set to 960. The slideWidth is set to 600 in order to display the full slide. The size of the tabs will be calculated automatically.

A height is required and set to 270. The timeout setting below will change the slides every 4000 milliseconds instead of the default 6000 milliseconds.

$("#example1").zAccordion({
	timeout: 4000,
	slideWidth: 600,
	width: 960,
	height: 270
});

Example 2 - Percentages

The example above shows how to use percentages. The width of the accordion is set to 100% (in quotes below) and the tabWidth to 10%. The size of the slides will be calculated automatically.

The startingSlide is set to 1 (the second slide in a zero-based index). The accordion has auto set to false and will not switch slides on a timer. Instead of a click, the slide change will trigger on mouseover.

The height setting is required and set to 200 pixels.

$("#example2").zAccordion({
	startingSlide: 1,
	auto: false,
	tabWidth: "10%",
	width: "100%",
	height: 220,
	trigger: "mouseover"
});

Example 3 - Creating Navigation

Start Stop

This might be the most practical example when it comes to rotating featured content. Each slide has its own class and custom background image.

$("#example3").zAccordion({
	slideWidth: "500px",
	width: "800px",
	height: "200px",
	timeout: 2000
});
$("#start").click(function() {
	$("#example3").zAccordion("start");
	$(this).css("display", "none");
	$("#stop").css("display", "block");
	return false;
});
$("#stop").click(function() {
	$("#example3").zAccordion("stop");
	$(this).css("display", "none");
	$("#start").css("display", "block");
	return false;
});
$("#thumbs a").click(function() {
	$("#example3").zAccordion("trigger", $(this).parent().index());
	return false;
});

Example 4 - An Advanced Example

Lorem ipsum dolor sit

Vivamus vel neque nec est hendrerit aliquet. Donec sed cursus sapien. Aenean auctor egestas turpis nec aliquam.
Donec a elit nisi

Proin sit amet massa vel elit pulvinar hendrerit eu nec odio. Maecenas faucibus odio sit amet nunc semper accumsan.
Duis vitae suscipit neque

Nunc porta commodo dolor, in vestibulum neque ullamcorper non. Nunc elementum ante in metus mollis sit amet consequat justo facilisis.
Sed a scelerisque lorem

Phasellus non ante in lectus eleifend scelerisque ut eget velit.

This example is very common with featured content. Each slide has a background image set with CSS. The text within the slides is only displayed for the open slide. In snippet below, the slideClass is set to frame. This setting will add a class of frame to each of the list-items. It will also add a class of frame-open for the open slide, frame-closed for the closed slides, and frame-previous for the slide that was previously open.

By default zAccordion will not add classes to the content. However, the option to add classes exists to make styling easy.

$(document).ready(function() {
	$("#example4 ul").zAccordion({
		slideWidth: 600,
		width: 900,
		height: 250,
		timeout: 3000,
		slideClass: "frame"
	});
});

Example 5 - Using the HTML5 Data Attribute

HTML5 gave web developers the ability to add custom data attributes to HTML elements. Instead of defining options with JavaScript, zAccordion can pull its options from data attributes. A simple example is below. The width, slideWidth*, and height are prefixed with data-.

* Note: Notice the lowercase slidewidth. In order to match HTML5 specs, the data attributes should be defined as lowercase instead of camelcase with JavaScript.

<div id="example5" data-width="900" data-slidewidth="500" data-height="250">

$(document).ready(function() {
	$("#example5").zAccordion();
});

Example 6 - The Destroy Function

Destroy
Destroy and Rebuild a Smaller Accordion

An accordion can be destroyed at any time. In this example, the slideClass has been set to destroy-me. With the snippet below, once the accordion is destroyed, and classes set by zAccordion will be removed. zAccordion will also completely remove the style attribute.

$(document).ready(function() {
	$("#example6").zAccordion({
		slideWidth: 320,
		width: 600,
		height: 100,
		timeout: 2000,
		slideClass: "destroy-me",
		speed: 500,
		pause: false
	});
	$("#destroy").click(function() {
		$("#example6").zAccordion("destroy", {
			removeStyleAttr: true, /* This attribute will default to true and remove all inline styles. */
			removeClasses: true, /* This attribute will default to false and remove any classes that have been set by zAccordion. */
			destroyComplete: {
				afterDestroy: function() {
					$("#destroy").fadeOut(1000);
					$("#rebuild").fadeOut(1000);
				}
			}
		});
		return false;
	});
	$("#rebuild").click(function() {
		$("#example6").zAccordion("destroy", {
			removeStyleAttr: true, /* This attribute will default to true and remove all inline styles. */
			removeClasses: true, /* This attribute will default to false and remove any classes that have been set by zAccordion. */
			destroyComplete: {
				rebuild: {
					slideWidth: 320,
					width: 400,
					height: 100,
					timeout: 2000,
					slideClass: "destroy-me",
					speed: 500,
					pause: false
				}
			}
		});
		return false;
	});
});

Example 7 - Maximum Tab Width

The example demonstrates how to set up zAccordion using width and tabWidth. The accordion has a width of 800 pixels. The tabWidth will need to be set to less than 200 pixels. Anything over 200 and the accordion will not build. It is best to set the tabWidth to less than 200 pixels in this example so the slides will be free to animate.

$(document).ready(function() {
	$("#example7").zAccordion({
		tabWidth: "200",
		width: "800",
		height: "150"
	});
});

Example 8 - Minimum Slide Width

This is example is similar to the example above, but this time slideWidth is set to 200 pixels. slideWidth should really be set to higher than 200 to allow for some animation.

$(document).ready(function() {
	$("#example8").zAccordion({
		slideWidth: "200",
		width: "800",
		height: "150"
	});
});

Example 9 - animationStart and animationComplete

This example shows how to fire an event when slide animation starts and when it is complete. The timeout is increased to 8 seconds in the snippet below in order to see the how the animationStart and animationComplete options work.

$(document).ready(function () {
	$("#example9").zAccordion({
		timeout: 8000,
		speed: 5000,
		tabWidth: "10%",
		width: "100%",
		height: "150",
		animationStart: function (animated) {
			$("#animation span").html("Animation started...");
			console.log('In `animationStart()`, `this` =', "\n", this);
			console.log('In `animationStart()`, `animated` =', "\n", animated);
		},
		animationComplete: function (animated) {
			$("#animation span").html("Animation complete.");
			console.log('In `animationComplete()`, `this` =', "\n", this);
			console.log('In `animationComplete()`, `animated` =', "\n", animated);
		}
	});
});

Example 10 - Another Advanced Example

Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor lacus sollicitudin ligula sagittis a ultricies nulla ultricies. Ut odio nisi, posuere sed blandit at, bibendum non dolor.
Dolor Sit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in condimentum sem. Aenean faucibus dignissim auctor. In ut libero vitae augue laoreet iaculis at a tellus.
Donec Ultrices
Duis viverra velit orci. Sed vestibulum mi nec est imperdiet sed ullamcorper augue molestie. Donec ultrices facilisis erat at porttitor.
Est Imper
Phasellus sed lectus nisl, eget cursus eros. Suspendisse posuere orci eu lorem luctus et porta nunc posuere. Cras sed lectus vitae leo accumsan adipiscing.

The example above demonstrates a unique way to rotate featured content. Similar to other examples, it uses classes set with slideClass to create the effect above.

$(document).ready(function() {
	$("#example10").zAccordion({
		width: 884,
		speed: 600,
		slideClass: "slider",
		slideWidth: 600,
		height: 400
	});
});

Example 11 - Easing

This example shows a quick way to add easing to the accordion using the jQuery Easing Plugin.

$(document).ready(function() {
	$("#example11").zAccordion({
		easing: "easeOutBounce",
		height: "150px",
		slideWidth: "600px",
		width: "900px"
	});
});

Example 12 - Firing a Function using afterBuild

The afterBuild option can be set up to fire a function once the accordion is built. Below, the afterBuild option will change the text of an id. As a practical example, this option could be used to set the accordion's CSS position from off screen to on screen, hiding the initial build and showing the accordion only when it is ready.

$(document).ready(function () {
	$("#example12").zAccordion({
		height: "150",
		slideWidth: "700",
		width: "960",
		buildComplete: function () {
			console.log('In `buildComplete()`, `this` =', "\n", this);
			$("#build span").html("Build complete.");
		}
	});
});

Example 13 - Using Error Messaging

In Example 7 the tabWidth was set to 200 pixels, or one fourth of the accordion's width. This example sets the tabWidth to 300 pixels. The accordion should throw an error in the JavaScript console and not build. The errors option is set to true.

$(document).ready(function() {
	$("#example13").zAccordion({
		tabWidth: "300",
		width: "800",
		height: "150",
		errors: true
	});
});

Example 14 - 100% Height and 100% Width

Please see the included percentage.html file.

Example 15 - A Responsive Example using Media Queries

Please see the included responsive.html file.