Collection of free HTML and CSS horizontal accordion code examples from Codepen and other resources.
Links
Made with
- HTML / CSS
About a code
Responsive Accordion Slider
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependeaccordion-
Links
Made with
- HTML / CSS (SCSS)
About a code
CSS-only Line Bar Navigation
Budging bars. CSS-only line bar navigation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Image Hover Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Accordion Gallery
CSS responsive accordion gallery with zoom animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML (Pug) / CSS (Less)
About the code
Pure CSS Accordion
Pure CSS horizontal accordion with transform
and box-shadow
effects.

Links
Made with
- HTML / CSS
About the code
Accordion Image Gallery
CSS accordion image gallery. Less code and great animation effect.

Links
Made with
- HTML
- CSS/SCSS
About the code
CSS3 Accordion Slider With Transitions And Flexbox
CSS3 accordion with 5 different effects.

Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Horizontal Accordion
Full page horizontal accordion.