$(function () {
	var collapsingLists = $('ul.collapsable');
	// Inject the click target (our arrow icon)
	$('li:has(ul)', collapsingLists).prepend('<span class="arrow"></span>');
	// Hide all but the first-level lists
	$('ul:not(:first)', collapsingLists).hide();
	// Since the first level list is expanded, set the appropriate data and styles
	$('> li:first > .arrow:first', collapsingLists)
		.data('expanded', 'true')
		.css({'background-position':'3px -9px'});
	// Where the magic happens
	$('.arrow', collapsingLists).bind('click', function () {
		var me		= $(this);
		var child	= $('~ ul', me);
		var state	= me.data('expanded');
		if (state) {
			// Opened. Close it.
			me.removeData('expanded').css({'background-position':'3px 5px'});
			if ($.browser.msie) {child.hide();}
			else {child.slideUp(500);}
		}
		else {
			// Closed. Open it.
			me.data('expanded', 'true').css({'background-position':'3px -9px'});
			if ($.browser.msie) {child.show();}
			else {child.slideDown(500);}
		}
	});
});