Collection of free HTML and CSS horizontal accordion code examples from Codepen and other resources.

Author

  • Doniyor11

Links

Made with

  • HTML / CSS

About a code

Responsive Accordion Slider

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependeaccordion-

Author

  • @keyframers

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: -

Author

  • Mert Cukuren

Links

Made with

  • HTML / CSS (SCSS)

About a code

Image Hover Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Daniel Subat

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: -

Demo image: Pure CSS Accordion

Author

  • Ivan Bogachev

Links

Made with

  • HTML (Pug) / CSS (Less)

About the code

Pure CSS Accordion

Pure CSS horizontal accordion with transform and box-shadow effects.

Demo image: Accordion Image Gallery

Author

  • Stefan C.

Links

Made with

  • HTML / CSS

About the code

Accordion Image Gallery

CSS accordion image gallery. Less code and great animation effect.

Demo image: CSS3 accordion slider with Transitions and Flexbox

Author

  • fox_hover

Links

Made with

  • HTML
  • CSS/SCSS

About the code

CSS3 Accordion Slider With Transitions And Flexbox

CSS3 accordion with 5 different effects.

Demo image: Horizontal Accordion

Author

  • Miles Manners

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Horizontal Accordion

Full page horizontal accordion.