$('html').removeClass('j-content j-people j-places').addClass('j-' + facet);
where facet is either "content", "people" or "places". This has the effect setting the CSS display value for all the option groups to "none", and then for the one selected value, changing it back to "block", thereby showing only the appropriate groups.
Can somebody explain to me how this technique works? I've never seen it before, nor have any of my co-workers.
Unfortunately, I'm not quite sure how you would like this question to be answered.
I would imagine there are CSS rules for the .j-content .j-people and .j-places defined on that page. All that jQuery is doing is insuring that all CSS classes are removed and then adding the selected one back to insure that only one is selected at any time.
I dont see anything peculiar about the snippet, per say, but I hope that helps.