Changing the trigger event

Most of the options are self-explanatory, and the values they accept are usually Boolean, string, or element selectors. Let's put some of them to use, so that we can explore their functionality. Change the final <script> element in accordion2.html so that it appears as follows:

<script>
  $(document).ready(function($) {
    var accOpts = {
      event:"mouseover"
    }
    $("#myAccordion").accordion(accOpts);
  });
</script>

We no longer need the custom stylesheet added in accordion2.html, so go ahead and remove the following line from the code:

  <link rel="stylesheet" href="css/accordionTheme.css">

Save these changes as accordion3.html. First, we create a new object literal called accOpts that contains the event key and the mouseover value, which is the event we wish to use to trigger the opening of an accordion panel. We pass this object to the accordion() method as an argument and it overrides the default option of the widget, which is...