API
next()

next()

Available since: v1.2
Type: public method
Returns: instance of the accordion

Method activates the next slide or the first slide if none or the last one is active.

Method calling

1) Method can be called inside every callback (as demonstrated in demo 1):

this.next();

2) In case there is only one HTML element matching the selector, method can be called anywhere in your code (as demonstrated in demo 2):

$('selector').data('jAccordion').next();

3) In case there are more HTML elements matching the selector, method can be called anywhere in your code (eq(index) specifies index of accordion instance):

$('selector').eq(index).data('jAccordion').next();

Demo 1

HTML
JS

<div class="accordion noJS">
	<div class="preloader">Loading content...</div>
	<div class="jAccordion-slidesWrapper">
		<div class="jAccordion-slide"><img src="images/banner1.png" width="910" height="380" alt="slide1" /></div>
		<div class="jAccordion-slide"><img src="images/banner2.png" width="910" height="380" alt="slide2" /></div>
		<div class="jAccordion-slide"><img src="images/banner5.png" width="910" height="380" alt="slide3" /></div>
		<div class="jAccordion-slide"><img src="images/banner3.png" width="910" height="380" alt="slide4" /></div>
		<div class="jAccordion-slide"><img src="images/banner4.png" width="910" height="380" alt="slide5" /></div>
	</div>
</div>

jQuery(document).ready(function( $ ) {
	$('.accordion').jAccordion({
		onReady : function() {
			$('.preloader', this.$accordion).remove();
			this.next();
		}
	});
});

Demo 1 demonstrates how to call the described method inside callback attached to event onReady (the protocol is the same for all callbacks). The first slide is open after accordion is fully loaded, which is pointless because you can use option defaultActiveSlideIdx instead but it's sufficient for demonstration purpose.

Loading content...

Demo 2

HTML
JS

<div class="accordion noJS">
	<div class="preloader">Loading content...</div>
	<div class="jAccordion-slidesWrapper">
		<div class="jAccordion-slide"><img src="images/banner1.png" width="910" height="380" alt="slide1" /></div>
		<div class="jAccordion-slide"><img src="images/banner2.png" width="910" height="380" alt="slide2" /></div>
		<div class="jAccordion-slide"><img src="images/banner5.png" width="910" height="380" alt="slide3" /></div>
		<div class="jAccordion-slide"><img src="images/banner3.png" width="910" height="380" alt="slide4" /></div>
		<div class="jAccordion-slide"><img src="images/banner4.png" width="910" height="380" alt="slide5" /></div>
	</div>
</div>
<button id="demonstrationBtn" disabled="disabled">Loading...</button>

jQuery(document).ready(function( $ ) {
	$('.accordion').jAccordion({
		onReady : function() {
			$('.preloader', this.$accordion).remove();
			$('#demonstrationBtn').text('Go to next slide').removeAttr('disabled');
		}
	});
	
	$('#demonstrationBtn').click(function() {
		$('.accordion').data('jAccordion').next();
	});
});

Demo 2 demonstrates how to call the described method anywhere in your code. You should consider using option nextBtn which is more suitable in most situations.

Loading content...

jAccordion by maniacpc, exclusively for CodeCanyon