zAccordion — A Barebones Example

A quick and easy accordion.

This example was not built to support smaller screen sizes such as mobile devices. However, the latest version of zAccordion can be configured to support these devices using media queries. Please see the example demonstrating responsive design.

« Back to the Examples

Example Slide Image 1 Example Slide Image 2 Example Slide Image 3

Implementation

  • The HTML is very flexible. An id is placed on the parent element. The child elements will make up the actual accordion.

    											<div id="slideshow">
												<img src="chair.jpg" width="600" height="310" alt="" />
												<img src="couch.jpg" width="600" height="310" alt="" />
												<img src="planning.jpg" width="600" height="310" alt="" />
											</div>

  • It is best to set up the accordion with a fixed width value and either a slideWidth or tabWidth value. The accordion above is set up with a width of 700 and tabWidth of 100 pixels. The slideWidth is calculated automatically.

    											$(document).ready(function() {
												$("#slideshow").zAccordion({
													width: 700,
													height: 310,
													tabWidth: 100,
													invert: true
												});
											});

    The invert option is set to true. This will keep the last slide in place as opposed to the first slide.

« Back to the Examples