Responsive & Animated jQuery Accordion Plugin - conventAccordion

conventAccordion is a fast and beautiful jQuery plugin that allows you to create responsive horizontal and vertical accordion slider with cool Elastic Collision Effects on your page. It comes with 4 built-in themes that helps implement your accordion slider easily and quickly.

Features:

• 4 stylish themes included: basic (default), dark, light or stitch;
• Horizontal (default) or vertical accordion
• Responsive layout
• Many options for creating your own accordion slider

How to use (Use Stitch THEME and Responsive Layout as an example)

1. Include conventAccordion CSS

<link rel="stylesheet" type="text/css" media="screen" href="css/style.css"/>

2. Markup

<ol class="rounded stitch" id="accordion_1" style="width: auto; height: auto; list-style-type: upper-roman">
<li>
<div>Slide One</div>
<div>
<figure> <img src="img-demo/1.jpg" alt="image" />
<figcaption>Assassini!</figcaption>
</figure>
</div>
</li>
<li>
<div>Slide Two</div>
<div>
<figure> <img src="img-demo/2.jpg" alt="image" />
<figcaption>Couldn't find an image of a Khajit thief! Fail!</figcaption>
</figure>
</div>
</li>
<li>
<div>Slide Three</div>
<div>
<figure> <img src="img-demo/3.jpg" alt="image" />
<figcaption>That's one angry looking red dude.</figcaption>
</figure>
</div>
</li>
<li>
<div>Slide Four</div>
<div>
<figure> <img src="img-demo/4.jpg" width="768" alt="image" />
<figcaption>Was fun for a couple of hours or so...</figcaption>
</figure>
</div>
</li>
<li>
<div>Slide Five</div>
<div>
<figure> <img src="img-demo/5.jpg" alt="image" />
<figcaption>Not as good as Hot Pursuit.</figcaption>
</figure>
</div>
</li>
</ol>

3. CSS For this example

figure {
display: block;
width: 100%;
height: 100%;
margin: 0
}
figcaption {
padding: 10px 15px;
position: absolute;
bottom: 20px;
right: 30px;
z-index: 3;
background: black;
background: rgba(0,0,0,0.7);
color: white;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px
}

4. Include necessary javascript files

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script> 
<script type="text/javascript" src="js/jquery.conventAccordion.js"></script> 

5. Call the plugin with options

<script>

(function($, d) {
	
	$('#accordion_1').conventAccordion({ 
		autoPlay: true, // Automatically cycle through slides
		startSlide: 1, // Displays slide (n) on page load
		slideInterval: 5000, // Time between slide cycles
		pauseOnHover: true, // pause On Hover
		actOnHover: true, // activate On Hover
		continuous: false, // autoPlay one cycle or continuous
		autoScaleImages : true, // If a single image is placed within the slide, this will be automatically scaled to fit
		slideSpeed: 3000, // Animation speed
		easing: 'easeOutBounce' // custom easing function
		// minContainerWidth : 300, minimum width the accordion will resize to
		// maxContainerWidth : 960, maximum width the accordion will resize to
	});

	});
	
})(jQuery, document);

</script>

6. Methods

play                                // trigger autoPlay on a stopped accordion
stop                                // stop an accordion playing
next                                // trigger the next slide
prev                                // trigger the previous slide
active,n                            // trigger slide n
destroy                             // remove the accordion, destroying all event handlers and styles (unstyled html content will remain)
debug                               // returns a debug object

Example:

$('[SELECTOR]').conventAccordion('[METHOD]');

Change Log:

v1.0.3 (2013-03-12)

• Added css files for vertical slides, gallery and rotating banner.

---

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.