API
$accordion

$accordion

Available since: v1.2
Type: public variable

Public variable which stores jQuery object of the accordion.

Variable accessing

1) Variable can be accessed inside every callback (as demonstrated in demo 1):

this.$accordion;

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

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

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

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

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();
			alert('Accordion is ready, preloader has been removed.');
		}
	});
});

Demo 1 demonstrates how to access the described variable inside callback attached to event onReady (the protocol is the same for all callbacks). Preloader (which is placed inside accordion) is removed after accordion is fully loaded and message indicating it is displayed below accordion.

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('Change accordion opacity').removeAttr("disabled");
		}
	});
	
	$('#demonstrationBtn').click(function() {
		if (parseFloat($('.accordion').data('jAccordion').$accordion.css('opacity')) !== 0.5) {
			$('.accordion').data('jAccordion').$accordion.css('opacity', 0.5);
		} else {
			$('.accordion').data('jAccordion').$accordion.css('opacity', '');
		}
	});
});

Demo 2 demonstrates how to access the described variable anywhere in your code.

Loading content...

jAccordion by maniacpc, exclusively for CodeCanyon