Changing the default active header

By default, the first header of the accordion will be selected when the widget is rendered with its content panel open. We can change which header is selected on page load using the active option. Change the configuration <script> block in accordion3.html so that it appears as follows:

  <script>
    $(document).ready(function($) {
      $("#myAccordion").accordion({
        active: 2
      });
    });
  </script>

Save this version as accordion4.html. We set the active option to the integer 2 to open the third content panel by default, and similar to the tab headers that we saw in the previous chapter, accordion's headers use a zero-based index. Along with an integer, this option also accepts a jQuery selector or raw DOM element.

We can also use the Boolean value of false to configure the accordion so that none of the content panels are open by default. Change the configuration object once again to the following:

  <script>
    $(document...