The accordion widget is another UI widget that allows you to group content into separate panels which can be opened or closed by visitor interaction. Therefore, most of its content is initially hidden from view, much like 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 below it. The currently visible content is hidden while the new content is shown when you click on another heading.
The accordion widget is a robust and highly configurable widget that allows you to save space on your web pages by displaying only a single panel of content at any time. This is like a tabbed interface but positioned vertically instead of horizontally. The following screenshot shows an example of an accordion widget:
It's easy to use for your visitors and easy to implement for us. It has a range of configurable...