Sunday, April 19, 2009

JQuery is Easier Than it Looks

As an unrequested favour to my new host, I decided to move the link list on the site over to JQuery. Originally the link list was an aggregate of at least 10+ php files that were then hidden by scriptaculous. And the mark up to get the hiding to work was pretty ugly. I've now switched to dynamically pulling in the link lists for a nicer page loading experience and for less demand on the server's cpu. And the script to pull this off is quite small:

// hide all divs
$(document).ready(function(){
$("div").hide();
});
// Accordion toggle categories and ajax load empty categories
function toggleContent(id) {
// id also serves as a file path for the file to be loaded
var div_id = "#"+id.substr(id.lastIndexOf('/')+1);
var jdiv = $(div_id);
// if div contains a noscript item, load content from id
if(jdiv.children("noscript").length > 0){
jdiv.html('loading...');
jdiv.slideDown("normal", function(){
jdiv.load(id+".php", function(){
// capture inner html and switcheroo with loaded text
var html = $(div_id).html();
jdiv.html('loaded');
jdiv.slideUp("normal", function(){
jdiv.html(html);
// hide all subcategories
$("div", div_id).each(function(){
$(this).hide()
});
jdiv.hide();
jdiv.slideDown("slow");
});
});
});
// otherwise just slide the div open and closed
} else {
$(div_id).slideToggle("slow");
}
}

Not to mention that it took very little time to learn, despite JQuery syntax looking fairly scary.