responsive
1.2.6

closeSlides()

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

Method deactivates all slides. Method takes effect only if a slide is active and autoplay is disabled.

Method calling

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

 this.closeSlides();

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

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

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({
		sticky : true,
		onReady : function() {
			$('.preloader', this.$accordion).remove();
		},
		onAccordionMouseLeave : function() {
			this.closeSlides();
		}
	});
});

Demo 1 demonstrates how to call the described method inside callback attached to event onAccordionMouseLeave (the protocol is the same for all callbacks). All slides are closed after cursor leaves the accordion. Demo is only for demonstration purpose and is pointless but it's sufficient for demonstration purpose. You can use option sticky with value false to gain the same effect.

Loading content...
slide1
slide2
slide3
slide4
slide5

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('Close slides').removeAttr('disabled');
		}
	});
	
	$('#demonstrationBtn').click(function() {
		$('.accordion').data('jAccordion').closeSlides();
	});
});

Demo 2 demonstrates how to call the described method anywhere in your code. First open any slide by moving cursor over it and then click button below accordion to close all slides.

Loading content...
slide1
slide2
slide3
slide4
slide5

jAccordion by maniacpc, exclusively for CodeCanyon