How to load content in jQueryUI accordion dynamically

Hey guys,

Do you aware of the fact that jQuery UI allows to load content dynamically for tabs but not for accordion?. So here I came up with a simple solution. You just have to pass a url in href attribute for each accordion header as shown below:

<div id="accordion">
	<h3><a href="ajax1.html">Section 1</a>>/h3>
	<div>
		<p>
		  Loading... Please wait.
		</p>
	</div>
	<h3><a href="ajax2.html">Section 2</a></h3>
	<div>
		<p>
		  Loading... Please wait.
		</p>
	</div>
</div>

Accordion UI provides many callback functions but we are going to use one of them, the most important callback function,  change which gets called when you click on any accordion panel to open it. We are going to use it to load content using AJAX.

<script>
  $(function() {
     $( "#accordion" ).accordion({
        collapsible: true,
        active : false,
        change: function (e, ui) {
          $url = $(ui.newHeader[0]).children('a').attr('href');
	  $.get($url, function (data) {
	     $(ui.newHeader[0]).next().html(data);
          });
        }
     });
  });
</script>

You can also download the code from github. Happy Coding

---