A best compilation of 50+ CSS accordion code examples. Each item is free and carefully selected from GitHub and CodePen.
1. Pure CSS Accordion
Author: Eduardo Moreno
Source: Code / Demo
Created on: NOVEMBER 22, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)
2. Full Page Horizontal AccordionJS
Author: Miles Manners
Source: Code / Demo
Created on: JULY 20, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)
3. Collapsing Accordion Pure CSS
Author: Kniw Studio
Source: Code / Demo
Created on: SEPTEMBER 18, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS
4. Accordion Gundams
Author: Weapons Forge
Source: Code / Demo
Created on: AUGUST 30, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS
5. accordion_image
Author: yay-yay-Ace
Source: Code / Demo
Created on: MARCH 18, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS
6. Feature Slider
Author: Andy Lorimer
Source: Code / Demo
Created on: OCTOBER 24, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript
7. component ui: accordion / collapse with pure CSS
Author: Vivi Tseng
Source: Code / Demo
Created on: MAY 7, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)
8. accordion gallery zoom animation (css, responsive)
Author: beeblebrox
Source: Code / Demo
Created on: JANUARY 23, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)
9. Accordion
Author: Lewis Briffa
Source: Code / Demo
Created on: JULY 16, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript
10. Flexbox Accordion
Author: Arjan Jassal
Source: Code / Demo
Created on: DECEMBER 27, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript
11. Smooth Accordion Dropdown Menu
Author: fainder
Source: Code / Demo
Created on: OCTOBER 13, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript
12. Funky Pure CSS Accordion
Author: Jamie Coulter
Source: Code / Demo
Created on: JANUARY 9, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS)
13. Pure CSS Accordion
Author: Raúl Barrera
Source: Code / Demo
Created on: DECEMBER 21, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS
14. Accordion Image Gallery
Author: Stefan C.
Source: Code / Demo
Created on: JANUARY 12, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)
15. CSS + HTML only Accordion Element
Author: Alex Bergin
Source: Code / Demo
Created on: APRIL 17, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Sass)
16. animated details element — week 11/52
Author: Mert Cukuren
Source: Code / Demo
Created on: MARCH 17, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)
17. Accordion Gundams
Author: Weapons Forge
Source: Code / Demo
Created on: AUGUST 30, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS
18. Multi-level Accordion
Author: Ryan Bobrowski
Source: Code / Demo
Created on: AUGUST 11, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript
19. Pure CSS Horizontal Accordion
Author: Aysha Anggraini
Source: Code / Demo
Created on: JANUARY 29, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)
20. Air Quotes Card Mode Grid + Accordion Content
Author: ZingGrid
Source: Code / Demo
Created on: DECEMBER 28, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript
21. Swanky little accordian list
Author: Jamie Coulter
Source: Code / Demo
Created on: FEBRUARY 22, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS)
22. Accordion in Vanilla Js with Css transition
Author: Davide Cantelli
Source: Code / Demo
Created on: OCTOBER 18, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)
23. 3D accordion (simple folding paper effect)
Author: Paweł Targoński
Source: Code / Demo
Created on: JUNE 8, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(Sass), JavaScript
24. Pure CSS – Accordion With Input Edit
Author: Jorge Brunetto
Source: Code / Demo
Created on: NOVEMBER 7, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS
25. Budging Bars | CSS-only Line Bar Navigation Tutorial | @keyframers 2.15.0
Author: @keyframers
Source: Code / Demo
Created on: AUGUST 22, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)
26. details and summary
Author: Monica Wheeler
Source: Code / Demo
Created on: MAY 15, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(PostCSS)
27. Bootstrap Collapsible Panel With Up/Down Arrow Icon
Author: Nunaram Hembram
Source: Code / Demo
Created on: JULY 20, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript
28. Accordion (CSS only) Responsive
Author: Oscar Manrique
Source: Code / Demo
Created on: AUGUST 5, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS
29. Pure CSS Accordion Tailwind CSS
Author: Chandra Shekhar
Source: Code / Demo
Created on: JULY 26, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)
30. Expanding Horizontal Accordion in React
Author: Sean
Source: Code / Demo
Created on: DECEMBER 29, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript(Babel)
31. flat accordion
Author: Soufiane Abid
Source: Code / Demo
Created on: APRIL 11, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript
32. CSS3 accordion slider with Transitions and Flexbox
Author: foxeisen
Source: Code / Demo
Created on: NOVEMBER 18, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)
33. Animate “height” with CSS Transitions
Author: Felipe Fialho
Source: Code / Demo
Created on: NOVEMBER 18, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less)
34. Flexbox Vertical Accordion
Author: Paulina Masiak
Source: Code / Demo
Created on: APRIL 19, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS
35. Simple Accordion Concept
Author: Kyle Brumm
Source: Code / Demo
Created on: AUGUST 11, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript
36. pure scss accordion tabs
Author: Natalia
Source: Code / Demo
Created on: SEPTEMBER 25, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)
37. Accordion Menu
Author: Benjamin
Source: Code / Demo
Created on: APRIL 19, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less), JavaScript
38. Accordion – flexbox _ Ousman Diallo
Author: Ousman Diallo
Source: Code / Demo
Created on: SEPTEMBER 26, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)
39. Responsive Accordion (Background Images)
Author: Michael Ferry
Source: Code / Demo
Created on: MARCH 22, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)
40. ARIA Accessible Accordion
Author: Kiri Egington
Source: Code / Demo
Created on: JUNE 22, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript
41. Accordion 2.0
Author: Stelios Baglaridis
Source: Code / Demo
Created on: AUGUST 6, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript
42. pure css accordion with radio buttons
Author: LidaChk
Source: Code / Demo
Created on: MARCH 21, 2023
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS
43. Responsive pure CSS tabs & accordion
Author: mikestreety
Source: Code / Demo
Created on: NOVEMBER 7, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)
44. Building a beautiful accordion using <details>
Author: Keenan Payne
Source: Code / Demo
Created on: MAY 21, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)
45. Accordions Pls
Author: Ryan
Source: Code / Demo
Created on: DECEMBER 13, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS), JavaScript(Babel)
46. Responsive Animated SCSS Accordion
Author: MrPirrera
Source: Code / Demo
Created on: DECEMBER 11, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)
47. Animated Collapse / Expend Component
Author: Elior Tabeka
Source: Code / Demo
Created on: NOVEMBER 3, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)
48. Material design Accordion – Bootstrap v3
Author: Shehab Eltawel
Source: Code / Demo
Created on: NOVEMBER 13, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript
49. Accordion Profile
Author: MOHAN KHADKA
Source: Code / Demo
Created on: AUGUST 15, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript
50. Pure CSS accordion
Author: Ivan Bogachev
Source: Code / Demo
Created on: JUNE 6, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Less)
51. Accordion FAQ
Author: Christian Prado
Source: Code / Demo
Created on: AUGUST 21, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS
52. CSS Responsive animated Accordion
Author: Chris Wright
Source: Code / Demo
Created on: NOVEMBER 21, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript