20+ Amazing Pure CSS Accordions [Examples 2022]
You have probably come across an accordion on a website already. They exist in many forms, but their use stays the same.
You can create a CSS accordion and make use of the benefits, in this article we will be exploring just that.
Accordions are a great way to display information in a certain section with a heading and save space. Usually, these accordions will collapse in some way, so another can be opened.
Let’s first understand what an accordion is and then go onto some real CSS accordion menus.
What Is A CSS Accordion?
A CSS Accordion is a web design element that allows you to toggle information when clicked. Usually seen in FAQ pages, an accordion tends to have a title and an icon and uses a transition to displays its content when clicked.
The main benefit of an accordion from the user experience point of view is that it provides an easy way to save space and avoid unnecessary links to other pages. It allows you to present the main information (titles) and only show the content the user requests when clicking on them.
18 Amazing Accordion CSS Examples
We have two CSS accordion menus that showcase different features.
Often some accordion menus only allow one item open at a time but this example allows one or the other, to try it out for yourself.
This is one of the most beautiful accordions examples we've found and it's made in pure CSS only.
Originally created by Ahmad Emran, this accordion shows a more elaborated design paying attention to details and creating three dimensions look and feel.
This CSS accordion menu breaks out when you open up a section.
When you open an item, the other will close, meaning only one can be open at a time.
The header is a great feature because it allows you to use multiple on one page and have them titled.
A simple CSS only accordion menu using a fast transition to toggle the submenus.
Only one item can be open at a time and it automatically closes any others items if they were open.
Clicking on the item again will also close an active item if it is open.
This is a simple yet beautiful accordion using a subtle animation for the text when the item gets active.
It's a great example of an accordion that you can use for the FAQs section of your page.
It allows multiple opened items, uses a slide animation, and includes arrow icons on each item that also get animated when the item gets opened or closed.
With this accordion CSS example, we have a modern and clean design UI that has a smooth animation.
It also has a more advanced animation between each item when they are opened and closed.
A simple but effective CSS accordion menu.
The animation it uses to slide between items is smooth and only one can be open at one time.
You could easily change this design with different colors and shadows.
Not every CSS accordion menu has to house text or information.
This great example shows us how accordion can be used to creatively showcase images that could contain more elements.
This example also uses CSS filters as well, which get applied to the images.
A modern and minimal feeling Accordion CSS example that has icons.
The body of the accordion items is padded on each side, making for an appealing look.
Another lovely example of a horizontal accordion picture slider.
This one evenly displays each picture, but once you hover over them, they display a larger version of the image.
Each image has a title and is clickable, and there is even a description.
Picture sliders are great and they have many different uses. We wrote an article on cool animated slider effects you may be interested in
A lovely example of a simple CSS accordion menu.
It uses a zoom-in and zoom-in-out animation for each item.
Each item can also be independently opened or closed.
CSS accordion menus are widely used for FAQ pages, they are an easy way to display lots of information without making the place look cluttered.
Each item can be conveniently opened or closed independently.
Do you know you can also create CSS only alerts?
A fresh-looking example of a simple CSS accordion menu.
Only one item can be open at once, there is a nice plus icon on the right which could be changed for something else more relevant.
A more advanced CSS Accordion example menu that offers some great features.
The main selling point with this one is that it is pure CSS but allows you to have multiple inner accordions inside the main one, try expanding the text in each main item.
A pure CSS accordion menu that has some cool features.
When you open or close an item, each item will transition to its open or close position.
This Accordion CSS example is nicely laid out with numbers and works well as an FAQ as you can see.
A fancy Accordion CSS example where each item can be opened or closed independently.
Comes with icons on the right side, which could easily be changed for something more fitting.
It has open and close arrows to indicate which item is open. And a smooth sliding animation.
A smoothly animated CSS accordion menu that has a hover effect on the headers of each item.
Each item can be set to a fixed height and scrolling can be activated when the content overflows.
Overall, a great example and built with pure CSS.
We’ve seen horizontal CSS accordion menus with pictures but what about text? Well, this example is just that.
Related article: Beautiful Website Footer Examples
Here we have a lovely simple example, slides left and right to open or close accordion items.
Good for lots of text and for keeping the information in a horizontal position on the webpage.
We know that accordion menus are great for FAQ pages.
This example is stunning and shows how an accordion menu can be used within a specific section on a webpage, this doesn’t have to be on a single page it could be located on a landing page.
The accordion menu itself has some nice subtle hover effects and they open quickly without any animation.
A different way to showcase images that could contain more information, you would have to add that yourself.
However, the design here is very interesting and the animation between each item is smooth and engaging.
Why Are Accordion Menus Useful?
Accordion Menus are useful because they help keep a design clean and modern. They help declutter space on a website by hiding text or information.
Something like an FAQ page, not every user is going to want to see all the text in one go, they may only need to see specific questions, and they can pick and choose which ones to open, that is why an accordion menu is perfect for this kind of use case.
Overall, they help improve the user experience and are convenient in displaying lots of information at once.
- 10+ CSS Hamburger Menu [CodePens]
- 20 HTML & CSS Tabs [CodePens]
- Great CSS calendars for your website
- Examples of CSS rounded buttons
Join 2,000+ readers and learn something new every month!