…and I like the new .on() and .off() API for setting up events.
I wrote some code that uses it, just for practice.
$.fn.tree = function(data) {
var $el = $(this),
html = [];
function renderNode(node) {
if (typeof node === "object") {
html.push("<ul>");
for (var key in node) {
if (node.hasOwnProperty(key)) {
html.push("<li><strong>" + key + ": </strong>");
html.push(typeof node[key] == "object" ? renderNode(node[key]) : node[key]);
html.push("</li>");
}
}
html.push("</ul>");
}
}
renderNode(data);
$el.html(html.join(""));
$el.on('click', 'strong', function() {
$(this).closest('li').find('ul').toggle(200);
});
};
$("<div>").appendTo("body").tree({
name: {
first: "Benjamin",
last: "Atkin"
},
location: {
city: "Boulder",
state: "CO"
},
accounts: {
social: {
twitter: "http://twitter.com/benatkin",
facebook: "http://facebook.com/atkin",
gplus: "http://gplus.to/benatkin",
identica: "http://identi.ca/benatkin",
rstatus: "http://rstat.us/bat"
},
creative: {
github: "http://github.com/benatkin",
blog: "http://benatkin.com/"
}
}
});