zAccordion Examples

Example 1

Each slide is 600 x 270 pixels. I've set the width of the accordion to 960 and the slideWidth to 600. The size of the tabs will be calculated automatically. This is probably the best way to fire the accordion.

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

Example 2

Each slide is 500 x 220 pixels. I've set the width of the accordion to 780 and the tabWidth to 150. The size of the slides will be calculated automatically.

The starting slide is set to 1 (the second slide of slides 0, 1, and 2). The accordion does not auto play. I've also set the accordion to trigger on mouseover.

$(document).ready(function() {
	$("#example2").zAccordion({
		startingSlide: 1,
		auto: false,
		speed: 100,
		tabWidth: 150,
		width: 780,
		height: 220
	});
});

Example 3

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.

Aliquam erat volutpat

Donec in quam purus, eget placerat elit. Vivamus feugiat tincidunt elit, varius tincidunt erat scelerisque id. Morbi aliquam dui bibendum est viverra ultrices.

Start 1 2 3 4 Stop

This is probably the most practical example. Each slide has its own class and custom background image. I've set the text inside each of the slides to display only for the class with the open slide. I've also customized the slide class names. The JavaScript and CSS are below:

$(document).ready(function() {
	var accordion = $("#example3").zAccordion({
		slideWidth: 600,
		width: 900,
		height: 350,
		timeout: 3000,
		slideClass: "frame",
		slideOpenClass: "frame-open",
		slideClosedClass: "frame-closed",
		easing: "easeOutCirc"
	});
	$("#thumbs .thumb-0").click(function(){
		accordion.start();
		return false;
	});
	$("#thumbs .thumb-1").click(function(){
		accordion.click(0);
		return false;
	});
	$("#thumbs .thumb-2").click(function(){
		accordion.click(1);
		return false;
	});
	$("#thumbs .thumb-3").click(function(){
		accordion.click(2);
		return false;
	});
	$("#thumbs .thumb-4").click(function(){
		accordion.click(3);
		return false;
	});
	$("#thumbs .thumb-5").click(function(){
		accordion.stop();
		return false;
	});
});
			
#example3 ul {list-style:none;}
#example3 h3 {color:#fff;text-transform:uppercase;font-size:24px;}
#example3 p {color:#fff;}
#example3 .frame-1 {background:url(images/slide1.gif) top left repeat;}
#example3 .frame-2 {background:url(images/slide2.gif) top left repeat;}
#example3 .frame-3 {background:url(images/slide3.gif) top left repeat;}
#example3 .frame-4 {background:url(images/slide4.gif) top left repeat;}
#example3 .frame-content {width:360px;padding:100px 120px;}
#example3 .frame-closed .frame-content {display:none;}
#example3 .frame-open .frame-content {display:block;}