How about this? It creates a couple of custom events (showme and
hideme) that you trigger to set the state, and the click event just
delegates to the right one based on the current state. I just
triggered a click on CollapseAll to set the initial state; if you
didn't want the coloring to be there you could add some code to remove
it at the bottom.
$(document).ready(function() {
$("a.Category")
.bind('showme', function() {
$(this).data("hidden", false).parent("li")
.css({background:
"#00ff00"}).children("ul").show();
return false;
})
.bind('hideme', function() {
$(this).data("hidden", true).parent("li")
.css({background:
"#ff0000"}).children("ul").hide();
return false;
})
.bind('click', function() {
$(this).trigger($(this).data("hidden")? "showme" :
"hideme");
return false;
});
$("#ExpandAll").bind('click', function() {
$("a.Category").trigger("showme");
return false;
});
$("#CollapseAll").bind('click', function() {
$("a.Category").trigger("hideme");
return false;
}).trigger("click");
});
