Start by declaring our variables, and caching our selectors to both elements:
var filtr = $("#filters"),
works = $("#works li"),
curnt = "current",
clsID = "";
Next we setup event delegation, meaning we only bind one event, yet we leverage the behavior of bubbling to listen for events that were initiated by clicking on a nested li
element:
filtr.on("click", "li", applyFilter);
Lastly, we declare the behavior of our handler. In this case, we capture the id
of the list item clicked (or "all" if no id exists), and we use that to filter the list items within our #works
element:
function applyFilter () {
clsID = this.id || "all";
clsID === "all"
? works.removeClass(curnt).show()
: works.not("." + clsID).removeClass(curnt).hide()
.siblings().addClass(curnt).show();
}
Fiddle: http://jsfiddle.net/mrU4Y/10/