responsive

updateSize()

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

Method forces resize of accordion. It's useful to call it after accordion's parent was resized via javascript.

Method calling

1) Method can be called inside every callback (but I can't imagine when it could be useful):

this.updateSize();

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

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

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

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>
<button id="resizeParentBtn" disabled="disabled">Loading...</button>
<button id="updateSizeBtn" disabled="disabled">Loading...</button>
jQuery(document).ready(function( $ ) {
	$('.accordion').jAccordion({
		onReady : function() {
			$('.preloader', this.$accordion).remove();
			$('#updateSizeBtn').text('Update size').removeAttr('disabled');
			$('#resizeParentBtn').text('Toggle parent size').removeAttr('disabled');
		}
	});
	
	$('#resizeParentBtn').click(function() {
		if (!($('.accordion').parent().hasClass('shrinked'))) {
			$('.accordion').parent().css('width', '50%').addClass('shrinked');
		} else {
			$('.accordion').parent().css('width', '100%').removeClass('shrinked');
		}
	});
	
	$('#updateSizeBtn').click(function() {
		$('.accordion').data('jAccordion').updateSize();
	});
});

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

I'm parent container

Loading content...
slide1
slide2
slide3
slide4
slide5

jAccordion by maniacpc, exclusively for CodeCanyon