Chapter 4. The Accordion Widget

The accordion widget is another UI widget that allows you to group the content into separate panels that can be opened or closed by visitor interaction. Therefore, most of its content is initially hidden from view, much like the tabs widget that we looked at in the previous chapter.

Each container has a heading element associated with it that is used to open the container and display the content. When you click on a heading, its content will slide into view (with an animation) below it. The currently visible content is hidden, while the new content is shown whenever we click on an accordion heading.

In this chapter, we are going to cover the following topics:

• The structure of an accordion widget

• The default implementation of an accordion

• Adding custom styling

• Using the configurable options to set different behaviors

• Working with methods for controlling the accordion

• The built-in types of animation

• Custom accordion events

The accordion widget is a robust and highly configurable...