60+ amazing CSS accordion designs, complete with downloadable code snippets. Get ideas for your next project and impress your users.
1. Swanky Little Accordian List by Jamie Coulter
Author: Jamie Coulter
Links: Source Code / Demo
Made with: HTML CSS
2. Building A Beautiful Accordion Using by Keenan Payne
Author: Keenan Payne
Links: Source Code / Demo
Made with: HTML CSS
3. CSS3 Accordion Slider With Transitions And Flexbox by foxeisen
Author: foxeisen
Links: Source Code / Demo
Made with: HTML CSS
4. Pure Scss Accordion Tabs by Natalia
Author: Natalia
Links: Source Code / Demo
Made with: HTML CSS
5. Flexbox Vertical Accordion by Paulina Masiak
Author: Paulina Masiak
Links: Source Code / Demo
Made with: HTML CSS
6. Native HTML Details Element Styled via CSS by Jachym Janousek
Author: Jachym Janousek
Links: Source Code / Demo
Made with: HTML CSS
7. Only HTML Accordion (No JS) by Mayank Singh
Author: Mayank Singh
Links: Source Code / Demo
Made with: HTML CSS
8. Simple Accordion Concept by Kyle Brumm
Author: Kyle Brumm
Links: Source Code / Demo
Made with: HTML CSS
9. CSS + HTML Only Accordion Element by Alex Bergin
Author: Alex Bergin
Links: Source Code / Demo
Made with: HTML CSS
10. Responsive Animated SCSS Accordion by MrPirrera
Author: MrPirrera
Links: Source Code / Demo
Made with: HTML CSS
11. CSS Responsive Animated Accordion by Chris Wright
Author: Chris Wright
Links: Source Code / Demo
Made with: HTML CSS
12. Pure HTML CSS Accordion by rahul kumar raidas
Author: rahul kumar raidas
Links: Source Code / Demo
Made with: HTML CSS
13. 3D Accordion (simple Folding Paper Effect) by Pawe Targoski
Author: Pawe Targoski
Links: Source Code / Demo
Made with: HTML CSS
14. No JavaScript Simple Accordion by Prasad D.
Author: Prasad D.
Links: Source Code / Demo
Made with: HTML CSS
15. Pure CSS – Accordion With Input Edit by Jorge Brunetto
Author: Jorge Brunetto
Links: Source Code / Demo
Made with: HTML CSS
16. Accordion by Amit Sheen
Author: Amit Sheen
Links: Source Code / Demo
Made with: HTML CSS
17. Expanding Horizontal Accordion In React by Sean
Author: Sean
Links: Source Code / Demo
Made with: HTML CSS
18. CSS Only Semantic Animated Accordion by redesigned
Author: redesigned
Links: Source Code / Demo
Made with: HTML CSS
19. Responsive Accordion (Background Images) by Michael Ferry
Author: Michael Ferry
Links: Source Code / Demo
Made with: HTML CSS
20. Accordion Gallery Zoom Animation (CSS, Responsive) by Daniel Subat
Author: Daniel Subat
Links: Source Code / Demo
Made with: HTML CSS
21. Pure CSS Accordion Tailwind CSS by Chandra Shekhar
Author: Chandra Shekhar
Links: Source Code / Demo
Made with: HTML CSS
22. Accordion Profile by Mohan Khadka
Author: Mohan Khadka
Links: Source Code / Demo
Made with: HTML CSS
23. Accordion by Lewis Briffa
Author: Lewis Briffa
Links: Source Code / Demo
Made with: HTML CSS
24. Accordion Gundams by Weapons Forge
Author: Weapons Forge
Links: Source Code / Demo
Made with: HTML CSS
25. Accordion Menu With HTML & CSS Only by Coding Beast
Author: Coding Beast
Links: Source Code / Demo
Made with: HTML CSS
26. Accordion Image Gallery by Stefan C.
Author: Stefan C.
Links: Source Code / Demo
Made with: HTML CSS
27. Accordion FAQ by Christian Prado
Author: Christian Prado
Links: Source Code / Demo
Made with: HTML CSS
28. Accordion_image by yay-yay-Ace
Author: yay-yay-Ace
Links: Source Code / Demo
Made with: HTML CSS
29. Pure HTML And CSS Accordion by Chris Ota
Author: Chris Ota
Links: Source Code / Demo
Made with: HTML CSS
30. Accordion Flexbox by Ousman Diallo
Author: Ousman Diallo
Links: Source Code / Demo
Made with: HTML CSS
31. Details/Summary Animated Accordion by Kam Black
Author: Kam Black
Links: Source Code / Demo
Made with: HTML CSS
32. HTML+CSS Only Accordion by Alina N.
Author: Alina N.
Links: Source Code / Demo
Made with: HTML CSS
33. Collapsing Accordion Pure CSS by Kniw Studio
Author: Kniw Studio
Links: Source Code / Demo
Made with: HTML CSS
34. Responsive Animated SCSS Accordion by MrPirrera
Author: MrPirrera
Links: Source Code / Demo
Made with: HTML CSS
35. ARIA Accessible Accordion by Kiri Egington
Author: Kiri Egington
Links: Source Code / Demo
Made with: HTML CSS
36. Feature Slider by Andy Lorimer
Author: Andy Lorimer
Links: Source Code / Demo
Made with: HTML CSS
37. Full Page Horizontal Accordion by Miles Manners
Author: Miles Manners
Links: Source Code / Demo
Made with: HTML CSS
38. Pure CSS Accordion by Rau
Author: Rau
Links: Source Code / Demo
Made with: HTML CSS
39. Animated Collapse / Expend Component by Elior Tabeka
Author: Elior Tabeka
Links: Source Code / Demo
Made with: HTML CSS
40. Accordion (CSS Only) Responsive by Oscar Manrique
Author: Oscar Manrique
Links: Source Code / Demo
Made with: HTML CSS
41. Accordions Pls by Ryan
Author: Ryan
Links: Source Code / Demo
Made with: HTML CSS
42. CSS Details And Summary by Monica Wheeler
Author: Monica Wheeler
Links: Source Code / Demo
Made with: HTML CSS
43. Pure CSS Accordion by Eduardo Moreno
Author: Eduardo Moreno
Links: Source Code / Demo
Made with: HTML CSS
44. Accordion Content by ZingGrid
Author: ZingGrid
Links: Source Code / Demo
Made with: HTML CSS
45. Flat Accordion by Soufiane Abid
Author: Soufiane Abid
Links: Source Code / Demo
Made with: HTML CSS
46. Simple accordion Menu with HTML And CSS by Bilal.Rizwaan
Author: Bilal.Rizwaan
Links: Source Code / Demo
Made with: HTML CSS
47. Accordion/Collapse with Pure CSS by Vivi Tseng
Author: Vivi Tseng
Links: Source Code / Demo
Made with: HTML CSS
48. Accordion by Tuna
Author: Tuna
Links: Source Code / Demo
Made with: HTML CSS
49. Funky Pure CSS Accordion by Jamie Coulter
Author: Jamie Coulter
Links: Source Code / Demo
Made with: HTML CSS
50. Accordion with Pure CSS and HTML by Bilal PF
Author: Bilal PF
Links: Source Code / Demo
Made with: HTML CSS
51. FAQ Accordion by Katherine Kato
Author: Katherine Kato
Links: Source Code / Demo
Made with: HTML CSS
52. Accordion In Js by Davide Cantelli
Author: Davide Cantelli
Links: Source Code / Demo
Made with: HTML CSS
53. Accordion 2.0 by Stelios Baglaridis
Author: Stelios Baglaridis
Links: Source Code / Demo
Made with: HTML CSS
54. Material Design Accordion – Bootstrap V3 by Shehab Eltawel
Author: Shehab Eltawel
Links: Source Code / Demo
Made with: HTML CSS
55. Accordion Horizontal (Pure CSS) by Mateus Generoso
Author: Mateus Generoso
Links: Source Code / Demo
Made with: HTML CSS
56. Basic Accordion by onepage
Author: onepage
Links: Source Code / Demo
Made with: HTML CSS
57. Pure CSS Accordion with Radio Buttons by LidaChk
Author: LidaChk
Links: Source Code / Demo
Made with: HTML CSS
58. CSS-only Accordion with Reveal Animation by S. Shahriar
Author: S. Shahriar
Links: Source Code / Demo
Made with: HTML CSS
59. Accordion by Håvard Brynjulfsen
Author: Håvard Brynjulfsen
Links: Source Code / Demo
Made with: HTML CSS
60. Pure CSS Horizontal Accordion by Aysha Anggraini
Author: Aysha Anggraini
Links: Source Code / Demo
Made with: HTML CSS
61. Flexbox Accordion by Arjan Jassal
Author: Arjan Jassal
Links: Source Code / Demo
Made with: HTML CSS
62. Accordion without Using JavaScript by CodiesBugs
Author: CodiesBugs
Links: Source Code / Demo
Made with: HTML CSS
63. Pure CSS Accordion by Ivan Bogachev
Author: Ivan Bogachev
Links: Source Code / Demo
Made with: HTML CSS
