Compound events

Most of jQuery's event-handling methods correspond directly to native DOM events. A handful, however, are custom handlers added for convenience and cross-browser optimization. One of these, the .ready() method, we have discussed in detail already. Others, including .mouseenter(), .mouseleave(), .focusin(), and .focusout(), normalize proprietary Internet Explorer events of the same name. Two custom jQuery handlers, .toggle() and .hover(), are referred to as compound event handlers because they intercept combinations of user actions, and respond to them using more than one function.

Showing and hiding advanced features

Suppose that we wanted to be able to hide our style switcher when it is not needed. One convenient way to hide advanced features is to make them collapsible. We will allow one click on the label to hide the buttons, leaving the label alone. Another click on the label will restore the buttons. We need another class to handle the hidden buttons, as follows:

.hidden...