You are currently viewing 15+ Best CSS Accordions

15+ Best CSS Accordions

15+ Best CSS Accordions 

Hello there! In this article, you will find 15+ Best CSS Accordions designs with complete source code so you just copy and paste it into your project Using HTML And CSS only.

Accordion menus are a great way to let users see only what they need without having to display all the information about the topic beforehand. users can toggle this with just a simple click.

Don’t worry we’ve got you covered. We have Handpicked the 15+ Best CSS Accordions designs Using pure HTML And CSS from the web for you to use in your project.

Let’s see some cool 15+ Best CSS Accordions designs.

1. Multi-level Accordion

Code by Ryan Bobrowski
Demo & download click here for code
Language used HTML, CSS, JS
External link / Dependencies No
Responsive No

Let’s start our list with a flat design accordion by Ryan Bobrowski with as many nested levels as you need. Click on it!

2. Material design Accordion – Bootstrap v3

Code by Shehab Eltawel
Demo & download click here for code
Language used HTML, CSS, JS
External link / Dependencies Yes
Responsive Yes

Material Design Accordion by Shehab Eltawel, developed using HTML, CSS, and JavaScript with the ability to add icons on show/hide with a smooth transition by adding an active class to the panel heading on show/hide.

3. Shutters

Code by Robin Savemark
Demo & download click here for code
Language used HTML,CSS(Less),JS
External link / Dependencies Yes
Responsive Yes

Product template with accordion by Robin Savemark, powered with some bootstrap and customized CSS and a little bit of jQuery.

4. Accordion

Code by Håvard Brynjulfsen
Demo & download click here for code
Language used HTML, CSS
External link / Dependencies No
Responsive Yes

This Accordion by Håvard Brynjulfsen is made using details and summary elements in HTML. As explained by the author, The <details> element encapsulates the <summary> element. The <summary> becomes the ‘label’ for the <details> and acts like a button. When clicked, the attribute open is added to the <details> element, making it display. You can therefore style the open and closed states separately if you’d like.

5. Native HTML details element styled via CSS – customized

Code by Jachym Janousek
Demo & download click here for code
Language used HTML,CSS(SCSS)
External link / Dependencies No
Responsive Yes

Another accordion uses only the details/summary native HTML element and CSS. This one is made by Jachym Janousek.

Frog Animation Using HTML And CSS

6. Accordion with Pure CSS and HTML

Code by Bilal PF
Demo & download click here for code
Language used HTML, CSS
External link / Dependencies Yes
Responsive Yes

A very simple accordion design by Bilal PF, developed using HTML and CSS only.

7. Accordion Profile

Code by Mohan Khadka
Demo & download click here for code
Language used HTML, CSS, JS
External link / Dependencies Yes
Responsive Yes

This is an accordion profile card design by Mohan Khadka made using HTML, CSS, and JavaScript. This is using, a nice toggle using jQuery Beautiful icons from FontAwesome. Awesome gradient background from UI Gradients.

8. Accordion

Code by Lewis Briffa
Demo & download click here for code
Language used HTML, CSS, JS
External link / Dependencies Yes
Responsive Yes

This Accordion is developed by Lewis Briffa using HTML, CSS, and JavaScript. JavaScript allows you to set the animation speed of the toggle. You also have the option of being able to have just one accordion item open at any one given time.

9. Pure CSS Accordion

Code by Álvaro
Demo & download click here for code
Language used HTML,CSS(SCSS)
External link / Dependencies Yes
Responsive Yes

This Accordion by Álvaro is based on the checkbox input+label trick to active tabs. This uses HTML, CSS(SCSS) and also has smooth animation on opening/closing

10. Accordion 2.0

Code by Stelios Baglaridis
Demo & download click here for code
Language used HTML, CSS, JS
External link / Dependencies No
Responsive Yes

This Accordion design is developed by Stelios Baglaridis using HTML, CSS, and JavaScript. Tabs open and close with slow animation. If you don’t like slow animations, you can always play around with the code to tweak things.

Dark/light Mode Sidebar Menu Using Html, Css And, Javascript

11. Basic, accordion

Code by onepage
Demo & download click here for code
Language used HTML,CSS(SCSS),JS
External link / Dependencies Yes
Responsive No

A simple and basic Accordion by one page made using HTML, CSS(SCSS), and JavaScript. Nothing fancy here!

12. Funky Pure CSS Accordion

Code by Jamie Coulter
Demo & download click here for code
Language used HTML(Haml),CSS(SCSS)
External link / Dependencies Yes
Responsive No

A funky pure CSS Accordion by Jamie Coulter was developed using HTML(Haml), and CSS(SCSS). This uses radio buttons for the active states. Additionally, It also has some pretty fancy animations.

13. CSS Responsive animated Accordion

Code by Chris Wright
Demo & download click here for code
Language used HTML,CSS(SCSS),JS
External link / Dependencies Yes
Responsive Yes

A simple and responsive animated Accordion by Chris wright made by using HTML, CSS(SCSS), and JavaScript.

14. Simple Accordion Concept

Code by Kyle Brumm
Demo & download click here for code
Language used HTML,CSS(SCSS),JS
External link / Dependencies Yes
Responsive Yes

A simple accordion design by Kyle Brumm, developed using HTML, CSS(SCSS), and JavaScript. colors might be too dull and boring for some people, if that’s you then they can be easily changed.

15. Flexbox Accordion

Code by Arjan Jassal
Demo & download click here for code
Language used HTML,CSS(SCSS),JS
External link / Dependencies Yes
Responsive No

We have seen a lot of horizontal accordions till this point. This is a vertical accordion by Arjan Jassal, developed using HTML, CSS(SCSS), and JavaScript.

50+ Html, Css &Javascript Projects With Source Code

16. Expanding Horizontal Accordion in React

Code by Sean
Demo & download click here for code
Language used HTML,CSS(SCSS),JS(Babel)
External link / Dependencies Yes
Responsive Yes

A quick alternative to the standard ‘Accordion’ pattern, built completely with React.

That’s it, folks. In this article, we shared 15+ Best CSS Accordions with cool and different designs. We have covered everything from simple & basic accordion design to the funky accordion with cool animations.

I hope you liked this article. Share this with your fellow developers. Comment down below your thoughts and suggestions, we would love to hear from you.

See our other articles on codewithrandom and gain knowledge in Front-End Development.

Thank You For Visiting!!!

follow us on Instagram: @codewith_random
Written by: @ayushgoel

Leave a Reply