22+ CSS Horizontal Accordions

Unique and stylish collection of 22+ HTML and CSS horizontal accordion code examples. Each item is free and carefully hand-picked from GitHub and CodePen.

1. Accordion Slider With Caption

See the Pen <a href="https://codepen.io/poriia/pen/XdazMd"> Accordion Slider With Caption</a> by pooriya (<a href="https://codepen.io/poriia">@poriia</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: pooriya
Source: Code / Demo
Created on: MARCH 30, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

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

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

4. Horizontal Accordions (on hover expend)

See the Pen <a href="https://codepen.io/immad-hamid/pen/OpBWjz"> Horizontal Accordions (on hover expend)</a> by Immad Hamid (<a href="https://codepen.io/immad-hamid">@immad-hamid</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Immad Hamid
Source: Code / Demo
Created on: MARCH 28, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

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

6. CSS3-only Horizontal Accordion

See the Pen <a href="https://codepen.io/ryanarnell/pen/VweNaN"> CSS3-only Horizontal Accordion</a> by Ryan Arnell (<a href="https://codepen.io/ryanarnell">@ryanarnell</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ryan Arnell
Source: Code / Demo
Created on: APRIL 10, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

7. Responsive Horizontal Accordion

See the Pen <a href="https://codepen.io/centurianii/pen/PdobXG"> Responsive Horizontal Accordion</a> by cent (<a href="https://codepen.io/centurianii">@centurianii</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: cent
Source: Code / Demo
Created on: AUGUST 20, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

8. Bare Necessity Horizontal Accordion

See the Pen <a href="https://codepen.io/jaycode/pen/KKZgdw"> Bare Necessity Horizontal Accordion</a> by Jay (<a href="https://codepen.io/jaycode">@jaycode</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jay
Source: Code / Demo
Created on: JULY 17, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

9. Responsive Accordion Slider

See the Pen <a href="https://codepen.io/googalus-maximus/pen/XdYBxV"> Responsive Accordion Slider </a> by Gregory Nickoloff (<a href="https://codepen.io/googalus-maximus">@googalus-maximus</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Gregory Nickoloff
Source: Code / Demo
Created on: APRIL 20, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

10. image hover effect — week 10/52

See the Pen <a href="https://codepen.io/knyttneve/pen/YgZbLO"> image hover effect — week 10/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 8, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

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

12. Flex Hover Slider | HTML + CSS + jQuery

See the Pen <a href="https://codepen.io/CameronFitzwilliam/pen/rmeMGr"> Flex Hover Slider | HTML + CSS + jQuery</a> by Cameron Fitzwilliam (<a href="https://codepen.io/CameronFitzwilliam">@CameronFitzwilliam</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Cameron Fitzwilliam
Source: Code / Demo
Created on: APRIL 20, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

13. Full Page Horizontal Accordion

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)

14. Accordian slider

See the Pen <a href="https://codepen.io/prakash-prajapati/pen/XWrKrGG"> Accordian slider</a> by Prakash Prajapati (<a href="https://codepen.io/prakash-prajapati">@prakash-prajapati</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Prakash Prajapati
Source: Code / Demo
Created on: AUGUST 16, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

15. Flex Horizontal Accordion

See the Pen <a href="https://codepen.io/mattbag/pen/LRvrmZ"> Flex Horizontal Accordion</a> by Matt Bagni (<a href="https://codepen.io/mattbag">@mattbag</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Matt Bagni
Source: Code / Demo
Created on: OCTOBER 27, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS) JavaScript

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

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

18. Horizontal accordion with hover

See the Pen <a href="https://codepen.io/tnakatsu/pen/qZdJmN"> Horizontal accordion with hover</a> by Takahiro Nakatsu (<a href="https://codepen.io/tnakatsu">@tnakatsu</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Takahiro Nakatsu
Source: Code / Demo
Created on: MARCH 3, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

19. Social Accordion Slider

See the Pen <a href="https://codepen.io/bradtraversy/pen/EEWNQP"> Social Accordion Slider</a> by Brad Traversy (<a href="https://codepen.io/bradtraversy">@bradtraversy</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Brad Traversy
Source: Code / Demo
Created on: MARCH 21, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

20. Accordion Slider

See the Pen <a href="https://codepen.io/Madbones3/pen/BXQRvG"> Accordion Slider</a> by Ashton (<a href="https://codepen.io/Madbones3">@Madbones3</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ashton
Source: Code / Demo
Created on: JULY 27, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

21. Responsive Accordion Slider

See the Pen <a href="https://codepen.io/doniyor11/pen/BaKZGJN"> Responsive Accordion Slider</a> by Doniyor11 (<a href="https://codepen.io/doniyor11">@doniyor11</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Doniyor11
Source: Code / Demo
Created on: AUGUST 30, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

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

23. horizontal accordion with masking

See the Pen <a href="https://codepen.io/mikeleworthy/pen/QWWEOVy"> horizontal accordion with masking</a> by Mike (<a href="https://codepen.io/mikeleworthy">@mikeleworthy</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mike
Source: Code / Demo
Created on: OCTOBER 16, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS