(^382) ❘ CHAPTER 15 ACCORDION
event : 'mouseover',
header : 'h4'
});
}
);
In the preceding script, take note that you also have to change the selector provided to the header
option because now you want to have a content pane that uses an
header to be open by default.
Figure 15-4 demonstrates that the element is used instead of an element.
Summary
In this chapter, you learned how to create an Accordion UI and the various options that you can
use to tweak an Accordion UI implementation. You learned that the Accordion plugin takes a list of
elements, such as a <ul> element, and makes the items in that list into smoothly animated content
panes, which transition one to the other by animating the height of each item in the list. By default,
headers for each content pane are provided as <a> elements, but you can change the header element
to something else by supplying a selector to the header option.
The active option can be used to change the default content pane that’s displayed when the page fi rst
loads. You can also have no default content pane by setting the active option to false and the col-
lapsible option to true. If no default content pane is specifi ed, the fi rst element in the list will be used.
The heightStyle option can each be used to tweak how the Accordion plugin defi nes the height for
each content pane. The auto value takes the highest content and uses that height as the height for all
other content panes, which may not always provide the right look and feel.
Finally, the event option is used to change the event that’s used to trigger a content pane transition;
click is the default event.
NOTE A quick reference of the Accordion plugin and its options appears in
Appendix N, “Accordion.”
EXERCISES
- Which option would you provide to the accordion() method to change the default content pane?
- Which option and its values would you consider using to change how the accordion() method
handles height?
- What option would you use to make the accordion() method trigger a content transition using
a mouseover event instead of a click event?
- What option would you use to change the header element to an
element?
Summary
In this chapter, you learned how to create an Accordion UI and the various options that you can
use to tweak an Accordion UI implementation. You learned that the Accordion plugin takes a list of
elements, such as a <ul> element, and makes the items in that list into smoothly animated content
panes, which transition one to the other by animating the height of each item in the list. By default,
headers for each content pane are provided as <a> elements, but you can change the header element
to something else by supplying a selector to the header option.The active option can be used to change the default content pane that’s displayed when the page fi rst
loads. You can also have no default content pane by setting the active option to false and the col-
lapsible option to true. If no default content pane is specifi ed, the fi rst element in the list will be used.The heightStyle option can each be used to tweak how the Accordion plugin defi nes the height for
each content pane. The auto value takes the highest content and uses that height as the height for all
other content panes, which may not always provide the right look and feel.Finally, the event option is used to change the event that’s used to trigger a content pane transition;
click is the default event.NOTE A quick reference of the Accordion plugin and its options appears in
Appendix N, “Accordion.”EXERCISES
- Which option would you provide to the accordion() method to change the default content pane?
- Which option and its values would you consider using to change how the accordion() method
handles height? - What option would you use to make the accordion() method trigger a content transition using
a mouseover event instead of a click event? - What option would you use to change the header element to an
element?