API
getActiveSlideIndex()

getActiveSlideIndex()

Available since: v1.2
Type: public method
Returns: Number

Method returns index of active slide or -1 if none is active. Slides are numbered from 0, which means that 1st slide equals 0, 2nd slide equals 1 etc.

Method calling

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

this.getActiveSlideIndex();

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').getActiveSlideIndex();

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').getActiveSlideIndex();

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();
		},
		onSlideStartOpening : function(e) {
			alert('Slide ' + this.getActiveSlideIndex() + ' is opening.');
		},
		onSlideOpened : function(e) {
			alert('Slide ' + this.getActiveSlideIndex() + ' is completely open.');
		},
		onSlideStartClosing : function(e) {
			alert('Closing slide is not active so index is ' + this.getActiveSlideIndex() + '.');
		}
	});
});

Demo 1 demonstrates how to call the described method inside callbacks attached to events onSlideStartOpening, onSlideOpened and onSlideStartClosing (the protocol is the same for all callbacks). Move your cursor over a slide of accordion and look at the report displayed below it.

Note: You can gain direct access to index of active slide in callbacks attached to events onSlideOpened, onSlideStartOpening and onSlideStartClosing as you can read in section called "Event properties" in description of these events. There is no need to call the described method in the mentioned callbacks, this demo was created just 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({
		sticky : true,
		onReady : function() {
			$('.preloader', this.$accordion).remove();
			$('#demonstrationBtn').text('Get index of active slide').removeAttr('disabled');
		}
	});
	
	$('#demonstrationBtn').click(function() {
		alert("Index of active slide is " + $('.accordion').data('jAccordion').getActiveSlideIndex() + ".");
	});
});

Demo 2 demonstrates how to call the described method anywhere in your code.

Loading content...

jAccordion by maniacpc, exclusively for CodeCanyon