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:
href="ajax1.html">Section 1>/h3>
<h3><a href="ajax2.html">Section 2</a></h3>Loading... Please wait.
</div>Loading... Please wait.
Accordion UI provides many callback functions but we are going to use one of them, the most important callback function, activate which gets called when you click on any accordion panel to open it. We are going to use it to load content using AJAX.
$(function() { $( "#accordion" ).accordion({ collapsible: true, active : false, activate: function (e, ui) { $url = $(ui.newHeader[0]).children('a').attr('href'); $.get($url, function (data) { $(ui.newHeader[0]).next().html(data); }); } }); });You can also download the code from github. Happy Coding 🙂
If you found this article useful in anyway, feel free to donate me and receive my dilettante painting as a token of appreciation for your donation.
Its always better to hack around than... 
Nice. But I am looking for more. So this works great the first time. The second time a user tries to open the accordion though, I should not need to reload the content, it just stays on to save a lot of traffic and waiting. Do you have a way for that? Actually I think I can just check if some contents exists?
You can set cache: true in your $.ajax() method.
More info: http://api.jquery.com/jQuery.ajax/
The solution is elegant. But not every browser supports it
http://www.electrictoolbox.com/jquery-json-ajax-caching/
Hey Yi,
Try this plugin: (http://www.jstorage.info/#support)
https://github.com/nectify/jquery-ajax-jstorage-cache
If this did not work then you can manually cache your ajax response into localStorage/fallback using https://github.com/d0ugal/locache
Equine
LactoCare with Composition
Nutri-Dog Literature Plain
ProBioTic Feed Supplement
Pro-Swine
script:
$(‘.accordion’).accordion({active: index1,
autoHeight: false,
// change: change,
changestart:function(event, ui) {
// alert (‘”‘+ui.newContent.html()+'”‘);
if(ui.newContent.html()==””){
ui.newContent.load(ui.newHeader.find(‘a’).attr(‘href’));
}
}
});
Hiho! Doesn’t work on me. I’m use the latest jQuery and jQuery UI library and there is also no error in the Chrome console.
Oops, I’ve replaced the hotlinked jquery/jqueryui. And also the API has also changed which does not support `change` event. Its replaced by `activate` now. Thanks for informing me. Cheers!
How would I show the content the very first time
You can pass the index of the accordion panel to open it on page load.
http://api.jqueryui.com/accordion/#option-active