Accordion layouts allow us to present multiple containers in a fashion where only one of the containers is expanded and visible at any one time. The other containers are collapsed, leaving only their headers visible, each of which can be clicked on to expand that content area and collapse the others.
This layout style is useful when only one area of content is required to be displayed at once. This might be because there isn't enough space to display everything at once or only one area is relevant at a time.
In this recipe, we will describe how to create an accordion layout to display some simple information about Sencha products. A screenshot of our final goal can be seen as follows: