50+ CSS Accordions

A best compilation of 50+ CSS accordion code examples. Each item is free and carefully selected from GitHub and CodePen.

1. Pure CSS Accordion

See the Pen <a href="https://codepen.io/emoreno911/pen/dOveoY"> Pure CSS Accordion</a> by Eduardo Moreno (<a href="https://codepen.io/emoreno911">@emoreno911</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/milesmanners/pen/QEQPjw"> Full Page Horizontal Accordion</a> by Miles Manners (<a href="https://codepen.io/milesmanners">@milesmanners</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/JeremyWink/pen/PoYdrLV"> Collapsing Accordion Pure CSS</a> by Kniw Studio (<a href="https://codepen.io/JeremyWink">@JeremyWink</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/weaponsforge/pen/vYGZrWR"> Accordion Gundams</a> by Weapons Forge (<a href="https://codepen.io/weaponsforge">@weaponsforge</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/yay-yay-ace/pen/wvaXrKY"> accordion_image</a> by yay-yay-Ace (<a href="https://codepen.io/yay-yay-ace">@yay-yay-ace</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/andylorimer/pen/meXadK"> Feature Slider</a> by Andy Lorimer (<a href="https://codepen.io/andylorimer">@andylorimer</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/vii120/pen/bGqNVWw"> component ui: accordion / collapse with pure CSS</a> by Vivi Tseng (<a href="https://codepen.io/vii120">@vii120</a>) on <a href="https://codepen.io">CodePen</a>. 
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)

See the Pen <a href="https://codepen.io/bbx/pen/Jxoqdg"> accordion gallery zoom animation (css, responsive)</a> by beeblebrox (<a href="https://codepen.io/bbx">@bbx</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: beeblebrox
Source: Code / Demo
Created on: JANUARY 23, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

9. Accordion

See the Pen <a href="https://codepen.io/LewisBriffa/pen/qjwqLb"> Accordion</a> by Lewis Briffa (<a href="https://codepen.io/LewisBriffa">@LewisBriffa</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/arjancodes/pen/gbweYB"> Flexbox Accordion</a> by Arjan Jassal (<a href="https://codepen.io/arjancodes">@arjancodes</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/fainder/pen/qBwBeO"> Smooth Accordion Dropdown Menu</a> by fainder (<a href="https://codepen.io/fainder">@fainder</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/jcoulterdesign/pen/OMmZPd"> Funky Pure CSS Accordion</a> by Jamie Coulter (<a href="https://codepen.io/jcoulterdesign">@jcoulterdesign</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/raubaca/pen/PZzpVe"> Pure CSS Accordion</a> by Raúl Barrera (<a href="https://codepen.io/raubaca">@raubaca</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/stefcharle/pen/Gydvbx"> Accordion Image Gallery</a> by Stefan C. (<a href="https://codepen.io/stefcharle">@stefcharle</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/abergin/pen/BaKVWd"> CSS + HTML only Accordion Element</a> by Alex Bergin (<a href="https://codepen.io/abergin">@abergin</a>) on <a href="https://codepen.io">CodePen</a>. 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

See the Pen <a href="https://codepen.io/knyttneve/pen/LamBMP"> animated details element — week 11/52</a> by Mert Cukuren (<a href="https://codepen.io/knyttneve">@knyttneve</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/weaponsforge/pen/vYGZrWR"> Accordion Gundams</a> by Weapons Forge (<a href="https://codepen.io/weaponsforge">@weaponsforge</a>) on <a href="https://codepen.io">CodePen</a>. 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

See the Pen <a href="https://codepen.io/rbobrowski/pen/DrYxRM"> Multi-level Accordion</a> by Ryan Bobrowski (<a href="https://codepen.io/rbobrowski">@rbobrowski</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/rrenula/pen/nZNwxw"> Pure CSS Horizontal Accordion</a> by Aysha Anggraini (<a href="https://codepen.io/rrenula">@rrenula</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/zinggrid/pen/ZVJZEM"> Air Quotes Card Mode Grid + Accordion Content (cpc-air CodePen Challenge)</a> by ZingGrid (<a href="https://codepen.io/zinggrid">@zinggrid</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/jcoulterdesign/pen/dPeMKY"> Swanky little accordian list</a> by Jamie Coulter (<a href="https://codepen.io/jcoulterdesign">@jcoulterdesign</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/cant89/pen/RLEoyV"> Accordion in Vanilla Js with Css transition</a> by Davide Cantelli (<a href="https://codepen.io/cant89">@cant89</a>) on <a href="https://codepen.io">CodePen</a>. 
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)

See the Pen <a href="https://codepen.io/paweltar/pen/EyVrmm"> 3D accordion (simple folding paper effect)</a> by Paweł Targoński (<a href="https://codepen.io/paweltar">@paweltar</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/jorgebrunetto/pen/Ebgogz"> Pure CSS – Accordion With Input Edit</a> by Jorge Brunetto (<a href="https://codepen.io/jorgebrunetto">@jorgebrunetto</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/team/keyframers/pen/aboBjar"> 📊 Budging Bars | CSS-only Line Bar Navigation Tutorial | @keyframers 2.15.0</a> by @keyframers (<a href="https://codepen.io/team/keyframers">@keyframers</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/frogmcw/pen/deqRwa"> CodePen Challenge details and summary</a> by Monica Wheeler (<a href="https://codepen.io/frogmcw">@frogmcw</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/nhembram/pen/XKEJJp"> Bootstrap Collapsible Panel With Up/Down Arrow Icon</a> by Nunaram Hembram (<a href="https://codepen.io/nhembram">@nhembram</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/manrosca/pen/KKzKexm"> Accordion (CSS only) Responsive</a> by Oscar Manrique (<a href="https://codepen.io/manrosca">@manrosca</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/chandrashekhar/pen/dyGLzgY"> Pure CSS Accordion Tailwind CSS</a> by Chandra Shekhar (<a href="https://codepen.io/chandrashekhar">@chandrashekhar</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/nevernotsean/pen/YpmWoM"> Expanding Horizontal Accordion in React</a> by Sean (<a href="https://codepen.io/nevernotsean">@nevernotsean</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/SoufianeAbid/pen/eZVzBL"> flat accordion</a> by Soufiane Abid (<a href="https://codepen.io/SoufianeAbid">@SoufianeAbid</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/foxeisen/pen/RjxGNR"> CSS3 accordion slider with Transitions and Flexbox</a> by foxeisen (<a href="https://codepen.io/foxeisen">@foxeisen</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/felipefialho/pen/AwYmMe"> Animate “height” with CSS Transitions</a> by Felipe Fialho (<a href="https://codepen.io/felipefialho">@felipefialho</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/paula_m/pen/OJyXqKy"> Flexbox Vertical Accordion</a> by Paulina Masiak (<a href="https://codepen.io/paula_m">@paula_m</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/kjbrum/pen/JKwByJ"> Simple Accordion Concept</a> by Kyle Brumm (<a href="https://codepen.io/kjbrum">@kjbrum</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/natali_k/pen/XPLjGm"> pure scss accordion tabs</a> by Natalia (<a href="https://codepen.io/natali_k">@natali_k</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/maggiben/pen/bGpzPj"> Accordion Menu</a> by Benjamin (<a href="https://codepen.io/maggiben">@maggiben</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/ousmanrichard/pen/yLOwMwJ"> Accordion – flexbox _ Ousman Diallo</a> by Ousman Diallo (<a href="https://codepen.io/ousmanrichard">@ousmanrichard</a>) on <a href="https://codepen.io">CodePen</a>. 
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)

See the Pen <a href="https://codepen.io/ferry/pen/ZYVwxz"> Responsive Accordion (Background Images)</a> by Michael Ferry (<a href="https://codepen.io/ferry">@ferry</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/kiriegington/pen/GEExzO"> ARIA Accessible Accordion</a> by Kiri Egington (<a href="https://codepen.io/kiriegington">@kiriegington</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/SteliosBox/pen/VzPMKy"> Accordion 2.0</a> by Stelios Baglaridis (<a href="https://codepen.io/SteliosBox">@SteliosBox</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/lidachk/pen/zYJmzMM"> pure css accordion with radio buttons</a> by LidaChk (<a href="https://codepen.io/lidachk">@lidachk</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/mikestreety/pen/yVNNNm"> Responsive pure CSS tabs & accordion</a> by mikestreety (<a href="https://codepen.io/mikestreety">@mikestreety</a>) on <a href="https://codepen.io">CodePen</a>. 
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>

See the Pen <a href="https://codepen.io/keenanpayne/pen/ZEbVwPE"> Building a beautiful accordion using <details></a> by Keenan Payne (<a href="https://codepen.io/keenanpayne">@keenanpayne</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/rhg_dev/pen/XVJzVY"> Accordions Pls</a> by Ryan (<a href="https://codepen.io/rhg_dev">@rhg_dev</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/pirrera/pen/KwzMGZ"> Responsive Animated SCSS Accordion</a> by MrPirrera (<a href="https://codepen.io/pirrera">@pirrera</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/eliortabeka/pen/JOGVNW"> Animated Collapse / Expend Component</a> by Elior Tabeka (<a href="https://codepen.io/eliortabeka">@eliortabeka</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/shehab-eltawel/pen/dYwOgX"> Material design Accordion – Bootstrap v3</a> by Shehab Eltawel (<a href="https://codepen.io/shehab-eltawel">@shehab-eltawel</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/khadkamhn/pen/oXORGZ"> Accordion Profile</a> by Mohan Khadka (<a href="https://codepen.io/khadkamhn">@khadkamhn</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/sfi0zy/pen/KeMZEb"> Pure CSS accordion</a> by Ivan Bogachev (<a href="https://codepen.io/sfi0zy">@sfi0zy</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/caprado/pen/PoNbpdr"> Accordion FAQ</a> by Christian Prado (<a href="https://codepen.io/caprado">@caprado</a>) on <a href="https://codepen.io">CodePen</a>. 
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

See the Pen <a href="https://codepen.io/chriswrightdesign/pen/AVENwb"> CSS Responsive animated Accordion</a> by Chris Wright (<a href="https://codepen.io/chriswrightdesign">@chriswrightdesign</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Chris Wright
Source: Code / Demo
Created on: NOVEMBER 21, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript