22+ CSS Horizontal Accordions

When you have a compact space, you want to organise all the content but wants only one section to visible at a time. Horizontal accordion is the answer to your question, no matter if you’re a web designer or developer. If your quest is to create unique and stylish layouts, look no further. In this comprehensive post, we have listed the top 22+ CSS horizontal accordion examples that are sourced from the best platforms all over the internet.

Visual Frontend offers hassle-free curated collection of horizontal accordion menus that smoothly expand when hovered over. Each code snippet of the horizontal menu is carefully selected and enhances the interaction experience of your website or web application. You can use these items for website navigation, FAQ pages, product features, tutorials, or guides. Each example is carefully tested on every browser and guarantees cross-browser support.

Let’s explore our best CSS horizontal accordion code examples, enhance the usability, and organise the content of your project in a visually appealing manner.

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