Summary

The accordion widget allows us to implement an object on the page that will show and hide different blocks of content. This is a popular and much sought-after effect, which is implemented by big players on the Web today, such as Apple.

We then moved on to look at the configurable options that can be used with accordion. We saw that we can use these options to change the behavior of the widget, such as specifying an alternative heading to be open by default, whether the widget should expand to fill the height of its container, or the event that triggers the opening of a content drawer.

Along with configurable options, we saw that the accordion exposes several custom events. Using them we can specify to callback functions during configuration, or bind to after configuration to execute additional functionality in reaction to different things happening to the widget.

We then looked at the accordion's default animation and how we can add simple transition effects to the opening of content...