22+ CSS Vertical Accordions

Are you looking to display content in a space-efficient and interactive manner? Look nowhere else! In this collection, we are showcasing 22+HTML and CSS vertical accordion code examples enhancing the user experience of your web project.

We have carefully selected each code snippet in our collection to showcase the true power of CSS vertical accordions. From stacked accordion and Bootstrap accordions to playful and dynamic stacked accordion with animations, these accordion examples provide a diverse range of options to elevate the usability of your web project.

Our accordion compilation is perfect for web designers or web developers; it works seamlessly on every device and can be used to create FAQs, menus, and content organisations. Let’s checkout our free CSS vertical accordion collection and make your web design shine like a star

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