Simulating User Interaction

At times it is convenient to execute code that we have bound to an event, even if the normal circumstances of the event are not occurring. For example, suppose we wanted our style switcher to begin in its collapsed state. We could accomplish this by hiding buttons from within the stylesheet, or by calling the .hide() method from a $(document).ready() handler. Another way, though, is to simulate a click on the style switcher so that the toggling mechanism we’ve already established is triggered.

The .trigger() method allows us to do just this:

$(document).ready(function() {
  $('#switcher').trigger('click');
});

Now right when the page loads, the switcher is collapsed, just as if it had been clicked as shown in the following screenshot:

Note that event propagation does not occur when an event is triggered by jQuery in this way; only the handlers attached directly to the element are executed. We must perform our trigger on $('#switcher'), not $('#switcher h3'), if we...