Telegram Group Join Now
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.
ADVERTISEMENT
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.
ADVERTISEMENT
7. Accordion Profile
ADVERTISEMENT
ADVERTISEMENT
| 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.
ADVERTISEMENT
8. Accordion
ADVERTISEMENT
| 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
