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: