Changing the Accordion Event (^) ❘ 379
This problem can be corrected by specifying the heightStyle option. The heightStyle option takes
three possible values: auto, fill, and content. The auto option sets the height of each panel to the
height of the tallest panel. The problem with this is that because all panels are hidden when the page
is rendered, this makes the height of each panel the height of the header without the additional hidden
content. The fill option uses the accordion element’s parent element as the basis for height. In the con-
text of this example, that would set the height of each item based on the height of the
The content option sets the height of each panel based on the height of the content that it contains. The
following example refl ects changing the script to specify the heightStyle option with the content value:
$(document).ready(
function()
{
$('ul').accordion({
collapsible : true,
active : false,
heightStyle : "content"
});
}
);
The preceding example is available in the source materials as Example 15-4. With the change in the
preceding script, each item opens without the content overlapping the other headings, as shown in
Figure 15-4.
FIGURE 15-4
In the next section you learn how to change the event that triggers opening each content panel in the
accordion collection.Changing the Accordion Event
Upon setup, Accordion content panes are transitioned when you click a header. You have the option
of changing the event that triggers the transition using the event option. The following script shows
you how to change the event to a mouseover event from a click event: