What is the accordion pattern?

An accordion menu is a vertically stacked list of headers that can be clicked to reveal or hide content associated with them. It is one of many ways you can expose content to users in a progressive manner.

What is accordion in UX design?

An accordion is a design element that expands in place to expose some hidden information. Unlike overlays, accordions push the page content down instead of being superposed on top of page content.

What is an accordion dropdown?

What is an accordion dropdown menu? HTML accordion menus are used for showing and hiding HTML elements. (There are also Javascript accordion menus and CSS accordion menus, depending on what programming language your app or website is using.)

What is an accordion heading?

The accordion header controls the state of the accordion panel. To mark this relationship, we can make use of the aria-controls attribute, which value is the id of the accordion panel (in this case, accordion-panel-1 ).

Are accordions good for UX?

While not their primary use, accordions can be used to navigate through websites and pages. They can group links to help the user navigate through interfaces. This is especially helpful in mobile design as it allows you to collapse information into different sections or pages.

Can screen readers read accordions?

Accordions can be useful elements for those using screen readers, as they allow users to select and open just the content they want to read. Accordions must be implemented in an appropriate manner to ensure they are understandable to users with visual impairments.

What is accordion in squarespace?

Accordion blocks are a new type of content block available in Squarespace. Commonly used for FAQ sections, accordion blocks will show a title and when you click on it, additional text will be revealed underneath it. These accordion blocks have their own custom design menu with a lot of options.

What is an accordion panel?

The 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 the content associated with that item.