22+ CSS Vertical Accordions

Enjoy these visually striking 22+ HTML and CSS vertical accordion code examples. Each item is designed to enhance user experience and costs you nothing.

1. 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)

2. 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

3. Vertical accordion menu using jQuery and CSS3

See the Pen <a href="https://codepen.io/arkev/pen/ANRzrV"> Vertical accordion menu using jQuery and CSS3</a> by Arkev (<a href="https://codepen.io/arkev">@arkev</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Arkev
Source: Code / Demo
Created on: APRIL 13, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

4. CSS3 Accordion (No Javascript) – Vertical – Single Visible

See the Pen <a href="https://codepen.io/mraffaele/pen/YGJXvm"> CSS3 Accordion (No Javascript) – Vertical – Single Visible</a> by Michael Raffaele (<a href="https://codepen.io/mraffaele">@mraffaele</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Michael Raffaele
Source: Code / Demo
Created on: OCTOBER 18, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

5. Vertical Accordion With Bootstrap Tab

See the Pen <a href="https://codepen.io/sandymahaur/pen/rNxggQB"> Vertical Accordion With Bootstrap Tab</a> by Sandeep Mahaur (<a href="https://codepen.io/sandymahaur">@sandymahaur</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Sandeep Mahaur
Source: Code / Demo
Created on: JULY 29, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

6. Minimal Accordion

See the Pen <a href="https://codepen.io/fsarachu/pen/MyObNz"> Minimal Accordion</a> by Franco Sarachu (<a href="https://codepen.io/fsarachu">@fsarachu</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Franco Sarachu
Source: Code / Demo
Created on: APRIL 5, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

7. CSS vertical accordion menu

See the Pen <a href="https://codepen.io/alexdevero/pen/dyEYJB"> CSS vertical accordion menu</a> by Alex Devero (<a href="https://codepen.io/alexdevero">@alexdevero</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Alex Devero
Source: Code / Demo
Created on: OCTOBER 20, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

8. Vertical accordion menu

See the Pen <a href="https://codepen.io/cptneo/pen/AZqNYL"> Vertical accordion menu</a> by Cpt NEO (<a href="https://codepen.io/cptneo">@cptneo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Cpt NEO
Source: Code / Demo
Created on: NOVEMBER 21, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

9. 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)

10. 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)

11. GSAP Vertical Accordion Menu

See the Pen <a href="https://codepen.io/hackfin/pen/KvWzPE"> GSAP Vertical Accordion Menu</a> by James Hackney (<a href="https://codepen.io/hackfin">@hackfin</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: James Hackney
Source: Code / Demo
Created on: AUGUST 8, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

12. Vertical Accordion

See the Pen <a href="https://codepen.io/josephshambrook/pen/DGdVVj"> Vertical Accordion</a> by Joseph Shambrook (<a href="https://codepen.io/josephshambrook">@josephshambrook</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Joseph Shambrook
Source: Code / Demo
Created on: OCTOBER 11, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less)

13. CSS Multi-Level Accordion

See the Pen <a href="https://codepen.io/nathanlong/pen/kVyONE"> CSS Multi-Level Accordion</a> by Nathan Long (<a href="https://codepen.io/nathanlong">@nathanlong</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nathan Long
Source: Code / Demo
Created on: SEPTEMBER 4, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

14. Easy-Responsive-Tabs-to-Accordion

See the Pen <a href="https://codepen.io/girl13/pen/rJxLbo"> Easy-Responsive-Tabs-to-Accordion</a> by Elena (<a href="https://codepen.io/girl13">@girl13</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Elena
Source: Code / Demo
Created on: FEBRUARY 2, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

15. 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)

16. Accordion (Slide from Left)

See the Pen <a href="https://codepen.io/johnatan-vargas/pen/rNYyOqd"> Accordion (Slide from Left)</a> by Johnatan Vargas (<a href="https://codepen.io/johnatan-vargas">@johnatan-vargas</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Johnatan Vargas
Source: Code / Demo
Created on: FEBRUARY 9, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

17. CSS Only Vertical Accordion Menu

See the Pen <a href="https://codepen.io/eriksenlezama/pen/EQarpO"> CSS Only Vertical Accordion Menu</a> by Eriksen (<a href="https://codepen.io/eriksenlezama">@eriksenlezama</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Eriksen
Source: Code / Demo
Created on: JANUARY 31, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

18. Rainbow Accordion (CSS Only, Responsive)

See the Pen <a href="https://codepen.io/TheMOZZARELLA/pen/XWzbKBe"> Rainbow Accordion (CSS Only, Responsive)</a> by MOZZARELLA (<a href="https://codepen.io/TheMOZZARELLA">@TheMOZZARELLA</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: mozzarella
Source: Code / Demo
Created on: JANUARY 28, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

19. Pure CSS Accordion

See the Pen <a href="https://codepen.io/IanWoodard/pen/mdBdZgG"> Pure CSS Accordion</a> by Ian (<a href="https://codepen.io/IanWoodard">@IanWoodard</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ian
Source: Code / Demo
Created on: NOVEMBER 30, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

20. Pure CSS Vertical Accordion

See the Pen <a href="https://codepen.io/maheshambure21/pen/XJvgNx"> Pure CSS Vertical Accordion</a> by MAHESH AMBURE (<a href="https://codepen.io/maheshambure21">@maheshambure21</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: MAHESH AMBURE
Source: Code / Demo
Created on: APRIL 15, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less)

21. Responsive sidebar, vertical accordion menu on Bootstrap

See the Pen <a href="https://codepen.io/alexuain/pen/JjdQBVm"> Responsive sidebar, vertical accordion menu on Bootstrap</a> by Alexander (<a href="https://codepen.io/alexuain">@alexuain</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Alexander
Source: Code / Demo
Created on: APRIL 6, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

22. 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)

23. Accordion Multi Menu

See the Pen <a href="https://codepen.io/meness/pen/AzjowY"> Accordion Multi Menu</a> by Alex (<a href="https://codepen.io/meness">@meness</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Alex
Source: Code / Demo
Created on: OCTOBER 3, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(Less), JavaScript