Accordion

An accordion component is a user interface element commonly used in web design to display content in a collapsible and expandable manner. It is a vertically stacked set of panels, with each panel containing a header and its associated content. The header usually includes a title and a toggle button or arrow that the user can click to expand or collapse the content. 

Accordions are used to conserve space on a web page while allowing users to access a large amount of information. They are particularly useful for presenting information in a structured and organized way, such as frequently asked questions (FAQs), product features, or steps in a process. When a user clicks on a header, the associated content is revealed.

Advanced Accordion

The advanced accordion component is designed to display images and short copy highlighting features of products and services. Each accordion item would feature an image on the opposite frame and a short description of the product or service. When a user clicks on an accordion item, the panel would expand to show additional details about the product or service.