API
getActiveSlide()

getActiveSlide()

Available since: v1.2
Type: public method
Returns: jQuery object of the active slide

Method returns active slide (if there is one) as jQuery object or null.

Method calling

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

this.getActiveSlide();

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

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

Demo 1

HTML
JS
CSS

<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();
		},
		onSlideOpened : function(e) {
			e.$slide.css('border-style', 'dashed');
		},
		onSlideStartClosing : function(e) {
			e.$slide.css('border-style', 'solid');
		}
	});
});

.accordion .jAccordion-slide {
	border: 3px solid #FFF;
	display: block;
	overflow: hidden;
	position: relative;
}

Demo 1 demonstrates how to call the described method inside callback attached to event onSlideOpened (the protocol is the same for all callbacks). jQuery object (active slide) returned by the described method is used to change border of active slide. The method is called when event onSlideOpened is triggered.

Note: You can gain direct access to 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
CSS

<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('Change border of active slide').removeAttr('disabled');
		}
	});
	
	$('#demonstrationBtn').click(function() {
		if ($('.accordion').data('jAccordion').getActiveSlide() !== null) {
			if ($('.accordion').data('jAccordion').getActiveSlide().css('border-left-style') === 'solid') {
				$('.accordion').data('jAccordion').getActiveSlide().css('border-style', 'dashed');
			} else {
				$('.accordion').data('jAccordion').getActiveSlide().css('border-style', 'solid');
			}
		}
	});
});

.accordion .jAccordion-slide {
	border: 3px solid #FFF;
	display: block;
	overflow: hidden;
	position: relative;
}

Demo 2 demonstrates how to call the described method anywhere in your code. Open a slide by moving cursor over it and then click button below accordion to change border style of active slide and then click it again to set it back to default border style.

Loading content...

jAccordion by maniacpc, exclusively for CodeCanyon