An accordion is a graphical control element comprising a vertically stacked list of items, such as labels or thumbnails. Each item can be "expanded" or "collapsed" to reveal or hide its associated content. This UI pattern is commonly used to save screen space and organize related content into digestible sections.
They are particularly useful on mobile devices where screen real estate is limited.
Click on the header of any section to expand or collapse its content. The plus sign next to the header will change to a minus sign when the section is open, indicating that it can be closed.
Using expand/collapse widgets can significantly improve user experience by:
Best practices include using clear labels, indicating the current state (expanded/collapsed), and ensuring keyboard navigation works seamlessly.