27 Most Useful CSS Accordions
If your accordion is purely in CSS then it will work for all your visitors. This gallery includes a large collection of free open source CSS accordion which you can use for any website project.
I’m sure you will find something new to love here.
A simple accordion made in CSS with the capability to adapt to any screen size. It uses the images as backgrounds and implements nice hover effects. You can use it on any project for free. Created by Michael Ferry.
A multicolor accordion that also happens to be responsive. It is a beautiful creation that you can integrate easily and improve to make it resemble your website. The code snippet has a simple design including a thumbnail and text, that can be as long as you want without taking so much space (it has scroll bars for the user to read the whole text. It was created by AdobeWordPress and was uploaded to Codepen….
This Codrops tutorial, written by Ring Wang, is going to guide you through the creation of an impressive image-based accordion. The idea is to allow users to click on the “tabs” created by the compressed images so they can see them after a smooth animation.
This Codrops article teaches how to make CSS3 accordions by making use of radio buttons and checkboxes. This technique has its advantages, such as the possibility to open multiple sections at the same time or close them all after they are open. Additionally, smooth animations bring the design to life.
This project arranges multiple accordions vertically and makes use of checkboxes and unordered lists in order to allow users to open and close any element at will, regardless of their current state. Styled with pure CSS, it features a very attractive look with bright highlights and pretty notifications.
Parting from Valdimir Kidinov’s impressive Futurico UI, we will use pure CSS3 to build an attractive content accordion. The design displays smooth animations when opening and closing elements, allowing only one section to be visible at a time. Credit for the article goes to DesignModo’s Valeriu Timbuc.
A vertical menu that brings collapsible elements into the mix, allowing more options to drop down from specific buttons when hovering on them. It is also able to display numbered notifications next to every icon, which by the way light up once the cursor is over their respective button.
A very simple and user-friendly content accordion styled with pure CSS. Built in a solid manner, it provides a reliable vertical navigation interface with clean animations and sections that close automatically as soon as another one is activated. Credit goes to JsFiddle user Luis M. Ruiz.
Pixels Daily offers you an amazing expandable menu in both PSD and CSS code forms. It consists of a couple of main elements that will display a dropdown with more selections when clicked, plus a working slider and jQuery open/close functionality integrated,
This code snippet provides a smooth accordion that uses CSS (Sass) for styling and jQuery to handle its animations. Just click on a section to open it after a fine sliding transition, displaying all of the content. It is only possible to open one section at a time. Uploaded by CodePen user Jon Stuebe.
A fantastic accordion styled with pure CSS. It expands and collapses its sections by just hovering the mouse over them, showcasing a smooth animation in the process. Also, it goes back to its original state right after moving the cursor away. Uploaded by CodePen’s Cory.
This attractive accordion interface makes use of polished hover animations to show and hide the content within its elements. All of the transitions and styling are created entirely with CSS, at the expense of a few limitations, like the fixed height of the hidden elements. Uploaded to CSSDeck’s LukyVj.
Here we have a very nice design for a vertical accordion menu with a dark, sober appearance. When hovering over the main elements, their icons highlight with a bright effect. Once you click on an option, a fluid animation shows the submenu inside of it. Created by CodePen user David Becerra.
This design exclusively uses CSS to style and animate this cool accordion. It features a solid black and white style with subtle gradients on the main elements and a very quick animation that opens the content after clicking on it. Developed by CSSDeck’s Azik Samarkandiy.
This beautiful accordion is intended to be used for displaying news or just quick pieces of information in a compact and convenient way. Apart from text, images can also be applied inside sections. Everything is styled with CSS, including some neat animations. Uploaded by CSSDeck’s Nihei Tsutomu.
This is an amazing set of animated accordions based completely on CSS. They come oriented both vertically and horizontally in order to fit properly in your project. In order to see the slides, just hover on them as a fast and smooth animation moves the elements around. Uploaded by CSSDeck user pixleight.
A very simple design for a tabbed interface with a light and responsive behaviour, which makes it ideal for use in mobile-oriented projects. The styling is completely stripped-down, offering a flat look with nothing to get distracted about. Uploaded by CodePen user Stuart Robson.
A basic and very colorful image accordion with soft left-to-right animations triggered when hovering on the square thumbnails placed on top. You can see the pictures in a much larger size when clicking on their respective preview. It was uploaded to CodePen by Calvin Webster.
This accordion menu features a set of slides placed each one on top of the next, styled in a beautiful manner. Once you click on a section, a smooth animation slides down the content. Additionally, bright blue highlights appear when hovering on any section. This project was developed by CodePen’s user Kevin Carpenter.
A simple design for a dark accordion including smooth transitions for opening and closing the menu portions. The headers support a small bubble for notifications and the boxes’ shadow effects are very satisfying. This project was created and uploaded to CSSDeck by the user Yannick Albert.
A clean and simple design for an animated accordion using jQuery. The portions slide up and down in order to display the content inside of them, keeping no more than one section open at a time. This code snippet is hosted at JSFiddle, courtesy of Harrison Statham who created it.
Using accordions can be very useful for displaying large amounts of content to your visitors in a compact way without overwhelming them. This tutorial will teach you how to make an amazing menu with delightful animations and colorful design, displaying content efficiently and impressing your visitors with fancy visuals.