learning by doing – nested jQuery Accordions

Nunja man trifft ja immer wieder mal auf besondere Schwierigkeiten beim Programmieren. So auch ich heute. Folgendes Problem:Nested Accordion mit jQueryUI => eigentlich kein Problem, halt, warte … DOCH! Das Problem ist dass die größe der nested Accordions nicht korrekt berechnet wird. Um das Problem zu lösen habe ich mich des Events beforeActivate bediehnt.

Nachfolgend ein Code beispiel um das ganze zu veranschaulichen.

<div id="main_accordion">
	<h3><a href="#">Section 1</a></h3>
	<div>	
		<div id="sub_accordion_1">
			<h3><a href="#">Subsection 1</a></h3>
			<div>
				<p>Some content!</p>
			</div>
			<h3><a href="#">Subsection 1</a></h3>
			<div>
				<p>Some content!</p>
			</div>
		</div>
	<h3><a href="#">Section 2</a></h3>
	<div>
		<div id="sub_accordion_2">
			<h3><a href="#">Subsection 1</a></h3>
			<div>
				<p>Some content!</p>
			</div>
			<h3><a href="#">Subsection 1</a></h3>
			<div>
				<p>Some content!</p>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	$('#main_accordion').accordion({'collapsible':true,'heightStyleType':'content','active':false});
	$('#sub_accordion_1').on('accordionbeforeactivate', function(event, ui) { $('#sub_accordion_1').accordion('refresh');});
	$('#sub_accordion_2').on('accordionbeforeactivate', function(event, ui) { $('#sub_accordion_2').accordion('refresh');});
</script>

Bevor das Panel aktiviert wird, wird ein refresh des Accordions ausgeführt (entspricht .resize() von jQuery vor v1.9). Dadurch wird die benötigte größe neu berechnet und der Inhalt wird correkt dargestellt. Villeicht hilft dass dem ein oder anderen weiter, greez Frank P.S. Comments erwünscht