UIUX 360 / 13-September-2022 / minute read

Accordion

In UI design, an accordion is a type of menu that vertically stacks items that let the user expand and collapse the content. It is a design element that expands to reveal some hidden information.

Written by: Prince Pal Singh

Your UI/UX Designer. Consultant. Partner. Over the past 18 years, I designed websites and apps for enterprise-level clients like Stanford-HCI Research, Accenture, Juniper Networks, Gemalto, Virtual Dental Care & much more.

G

H

J

K

M

N

O

Q

V

W

X

X-Height

Y

Yerkes-Dodson Law

Z

What is Accordion?

Overview

In UI design, an accordion is a type of menu that vertically stacks items that let the user expand and collapse the content. It is a design element that expands to reveal some hidden information.

An accordion is a UI component that allows the user to hide or reveal content. Unlike overlays, accordions push page content down instead of being superposed on top of page content. In web design, an accordion is a type of menu that displays a list of headers stacked on top of each other. When clicked (or triggered by keyboard interaction or a screen reader), these headers will either reveal or hide the relevant content.