27 Most Useful CSS Accordions

css acordionThere are many jQuery plugins out that can do this job for you but what do you do if the visitor has Javascript turned off, then the accordion won’t work correctly.

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.

Responsive Background Images CSS Accordion

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.  

CSS and JS Flexible Accordion

A flexible accordion with indicators made in CSS and JavaScript. It can be used as a menu within a website, or to show promotions and deals without taking so much space. This live code was created by RandyGarza and you can use it and modify it for free.

Responsive Multicolor Accordion

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….

Image Accordion with CSS

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.

Animated Accordion with CSS

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.

Create CSS-Based Content Accordions

This tutorial tells you how to create CSS-only accordions arranged either vertically or horizontally, including sharp animations for a dynamic look. This method is a great alternative to jQuery-based accordions, since it ensures proper operation even in environments with JavaScript turned off.

CSS3 Multiple Accordion Menu

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.

Content Accordion In Pure CSS3

 

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.

An Accordion Using CSS Transitions

Avoid using JavaScript with your content accordions in favor of CSS3, this tutorial by Paul Hayes will show you how. Apart from arranging the material, it is possible to apply animations for a more pleasing appearance. One of the downsides of this technique is the inability to have multiple accordions open in one page.

Accordion with JavaScript and CSS

This project brings a sharp accordion created with CSS and JavaScript. Fast and dynamic, it allows the addition of images and clickable tables within sections. On the styling department, it features a neat “flash” effect when clicking or hovering on the elements.

Vertical Dark Dropdown

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.

Bootstrap Vertical Menu

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.

Expandable CSS and jQuery Menu

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,

Simple Sass and jQuery Accordion

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.

CSS Hover-Activated Accordion

 

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.

Fading List Accordion

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.

Vertical Accordion Menu Using jQuery and CSS3

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.

Accordion Using Only CSS

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.

Classic Accordion with Pure CSS

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.

CSS-Based Animated Accordion

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.

Responsive Accordion with Tabs

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.

Multicolor Thumbnail Accordion for jQuery

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.

Vibrant Sliding Animated Accordion

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.

Minimal Dark Accordion in jQuery

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.

Fluid and Simple jQuery Accordion

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.

Fresh Content Accordion with jQuery

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.

Turn jQuery Accordions Into CSS3

This nice article from Script Tutorials shows that sometimes there’s no need to use JavaScript or jQuery to create beautiful accordions since we can always rely on the power of CSS3 to handle everything for us, including the OnClick event.

 

You may also like...

Read previous post:
Websites That Are Stepping Away from Traditional Layouts
30+ Best Responsive Web Design Tutorials

Today, everyone wants their website to be mobile compatible, so this is particularly challenging. But luckily there are lots of...

Close