An interactive, smooth and fully responsive accordion UI with CSS and JavaScript Example

Download

What's an accordion?

An accordion always contains the category title, an expanded and a collapsed state, an icon indicating expansion, and the spacing between them.

When and how should it be used?

It should be used when users only need a few key concepts or descriptions of the content on a single page.

What happens if the user clicks on a collapsed card while another card is open?

It happens that the open card was closed, to give way to the information of the next open card, but there are different designs that prefer it the other way around.

How to choose an icon to indicate expansion?

You must choose a different icon to open and close, so that the user understands what action he took.