accordion

Accordion is a vertically stacked list of items, such as labels or thumbnails, that can be clicked to reveal or hide content associated with them. There can be zero expanded items, exactly one, or more than one item expanded at a time, depending on the configuration.

Usually accordions are created using JavaScript (or jQuery plugins) as well as HTML5 and CSS3 techniques.

User interface accordions might refer to menus, widgets, or content areas which expand like the musical instrument. It is one of many ways you can expose content to users in a progressive manner. Allowing people to have control over the content by expanding it or deferring it for later lets them decide what to read and what to ignore.

Accordion menus are often used as a website’s main navigation. In this way, it acts much like navigation tabs, as menu items are collapsed when a new panel is clicked. Where the navigation tabs are most often used horizontally, accordion menus are most often used vertically. Accordion menus can, however, also function quite well as sub-navigation for a specific section of a website.

Basically, accordions are useful for long pages with paragraphs and headers which might not be interesting for all users, for frequently asked questions pages and checkout pages since hiding each step makes it easier for the user to focus on what is really necessary (mainly the current step in the checkout process).

The other advantages of using accordions are the following:

• Collapsing the page minimizes scrolling.
• By allowing people to control what content they see and what remains hidden, the information feels less overwhelming so that it is a useful way to present content.
• Accordions can be a better alternative to anchor links because people expect clicking a link will load a new page and without proper cues people might be confused about where they are on the site.