Note: This article is published on 11/19/2024.
This article is about UI design. But here is no this category, then I put it in Design Pattern category even they in fact are different concept.
What is Accordion Pattern:
An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content. The headings function as controls that enable users to reveal or hide their associated sections of content. Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.
Accordion Pattern is a stacked Sections with Show/Hide functionality.
Terms for understanding accordions include:
Accordion Header:
Label for or thumbnail representing a section of content that also serves as a control for showing, and in some implementations, hiding the section of content.
Accordion Panel:
Section of content associated with an accordion header.
Accordion Samples:
This is a dynamic example: CodePen - Create a New Pen.
The following are static samples:
![]()
References: