Welcome to our collection of CSS accordions! In this article, we have curated a diverse range of free HTML and CSS accordion code examples, including horizontal, vertical, simple, responsive, animated, and more. Accordions are a versatile and effective way to organize and display content in a compact and interactive manner. With our August 2023 update, we are thrilled to introduce 9 new examples to our collection, showcasing the latest trends in accordion design.

Whether you're a web developer, designer, or simply looking to enhance your website's user experience, these customizable code examples offer a variety of options to create sleek and dynamic accordions. Explore our hand-picked selection now and elevate your website's design and functionality!

Related Articles

  1. Bootstrap Accordions
  2. jQuery Accordions
  3. React Accordions
  4. Tailwind Accordions
  5. HTML <details> & <summary> with CSS

Author

  • S. Shahriar

Made with

  • HTML / CSS

About a code

CSS-only Accordion with Reveal Animation

This CodePen demonstrates how we can animate the opening and closing states of an accordion with fancy reveal animation using only CSS. This concept is suitable for creating FAQ sections, Table of Contents, and more.

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

Responsive: yes

Dependencies: -

Author

  • LidaChk

Made with

  • HTML / CSS

About a code

Pure CSS Accordion with Radio Buttons

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

Responsive: yes

Dependencies: -

Author

  • Mayank Singh

Made with

  • HTML / CSS

About a code

Only HTML Accordion (No JS)

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

Responsive: yes

Dependencies: -

Author

  • Amit Sheen

Made with

  • HTML / CSS (SCSS)

About a code

Accordion

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

Responsive: yes

Dependencies: -

Author

  • Vivi Tseng

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Accordion/Collapse with Pure CSS

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

Responsive: yes

Dependencies: -

Author

  • redesigned

Made with

  • HTML / CSS

About a code

CSS Only Semantic Animated Accordion

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

Responsive: yes

Dependencies: -

Author

  • HÃ¥vard Brynjulfsen

Made with

  • HTML / CSS

About a code

Accordion

A demonstation of what you can do with the details and summary elements.

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

Responsive: yes

Dependencies: -

Author

  • Jachym Janousek

Made with

  • HTML / CSS (SCSS)

About a code

Native HTML Details Element Styled via CSS

Implementation of an accordion-like component using only the details/summary native HTML element and CSS for styling. Best results can be seen in Chrome or Blink-based browsers. Firefox and others have decent results as well, but they could be improved creating alternative open/close icons.

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

Responsive: yes

Dependencies: -

Author

  • Ousman Diallo

Made with

  • HTML / CSS

About a code

Accordion Flexbox

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

Responsive: yes

Dependencies: -

Author

  • Bilal PF

Made with

  • HTML / CSS

About a code

Accordion with Pure CSS and HTML

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

Responsive: yes

Dependencies: -

Author

  • Tuna

Made with

  • HTML / CSS

About a code

Accordion

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

Responsive: yes

Dependencies: ionicons.css

Author

  • CodiesBugs

Made with

  • HTML / CSS

About a code

Accordion without Using JavaScript

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

Responsive: yes

Dependencies: -

Author

  • Coding Beast

Made with

  • HTML / CSS (SCSS)

About a code

Accordion Menu With HTML & CSS Only

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

Responsive: yes

Dependencies: font-awesome.css

Author

  • Bilal.Rizwaan

Made with

  • HTML / CSS

About a code

Simple accordion Menu with HTML And CSS

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

Responsive: yes

Dependencies: -

Author

  • Alina N.

Made with

  • HTML / CSS

About a code

HTML+CSS Only Accordion

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

Responsive: yes

Dependencies: -

Author

  • rahul kumar raidas

Made with

  • HTML / CSS

About a code

Pure HTML CSS Accordion

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

Responsive: yes

Dependencies: -

Author

  • Prasad D.

Made with

  • HTML / CSS (SCSS)

About a code

No JavaScript Simple Accordion

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

Responsive: yes

Dependencies: -

Author

  • ZingGrid

Made with

  • HTML / CSS / JavaScript

About the code

Accordion Content

Air quotes card mode grid and accordion content.

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

Responsive: no

Dependencies: zinggrid.js

Demo image: Accordions Pls

Author

  • Ryan

Made with

  • HTML/Pug
  • CSS/SCSS
  • JavaScript/Babel (Vue.js)

About the code

Accordions Pls

Vertical accordion with HTML, CSS and JS (Vue.js).

Demo image: Accordion In Js

Author

  • Davide Cantelli

Made with

  • HTML
  • CSS/SCSS
  • JavaScript

About the code

Accordion In Js

Accordion in vanilla JS with CSS transition.

Demo image: Accordion 2.0

Author

  • Stelios Baglaridis

Made with

  • HTML
  • CSS
  • JavaScript

About the code

Accordion 2.0

Vertical accordion with HTML, CSS and JS.

Demo image: Accordion

Author

  • Lewis Briffa

Made with

  • HTML
  • CSS (Ionicons.css)
  • JavaScript (jQuery.js)

About the code

Accordion

Accordion JS functionality allowing you to set the animation speed of the toggle. You also have the option of being able to have just one accordion item open at any one given time.

Demo image: ARIA Accessible Accordion

Author

  • Kiri Egington

Made with

  • HTML
  • CSS/SCSS
  • JavaScript (jQuery.js)

About the code

ARIA Accessible Accordion

A simple accordion that can be used by both mouse and keyboard-only users.

Demo image: FAQ Accordion

Author

  • Katherine Kato

Made with

  • HTML / CSS / JavaScript

About the code

FAQ Accordion

Minimal FAQ accordion made with little vanilla JavaScript.

Demo image: Basic Accordion

Author

  • onepage

Made with

  • HTML
  • CSS/SCSS (Animate.css)
  • JavaScript (jQuery.js)

About the code

Basic Accordion

Basic accordion in HTML, CSS and JS.

Demo Image: Simple Accordion Concept
Demo Image: Simple Accordion Concept

Simple Accordion Concept

HTML, CSS and JavaScript simple accordion concept.
Made by Kyle Brumm
March 24, 2017

Demo Image: Funky Pure CSS Accordion
Demo Image: Funky Pure CSS Accordion

Funky Pure CSS Accordion

Another pure CSS UI Piece here using radio buttons for the active states.
Made by Jamie Coulter
March 19, 2017

Demo Image: Expanding Horizontal Accordion in React
Demo Image: Expanding Horizontal Accordion In React

Expanding Horizontal Accordion In React

A quick alternative to the standard 'Accordion' pattern, built completely with React.
Made by Sean
January 7, 2017

Author

  • Dandi Wiratsangka

Made with

  • HTML / CSS

About a code

Pure HTML+CSS Accordion

Accordion without Javascript.

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

Responsive: yes

Dependencies: font-awesome.css

Demo Image: CSS Accordion
Demo Image: CSS Accordion

CSS Accordion

A simple solution for creating a pure CSS accordion with a CSS transition on the panel height, achieved by setting "max-height" of the accordion panel instead of "height".
Made by Matthew Scott
October 28, 2016

Demo Image: 3D Accordion
Demo Image: 3D Accordion

3D Accordion

Simple accordion with 3D folding paper effect in HTML, CSS and JavaScript.
Made by Pawe Targoski
June 13, 2016

Demo image: Material Design Accordion - Bootstrap 3

Author

  • Shehab Eltawel

Made with

  • HTML
  • CSS (Bootstrap.js)
  • JavaScript (jQuery.js, Bootstrap.js)

About the code

Material Design Accordion - Bootstrap 3

Bootstrap 3 collapse redesigned to match Material Design concept with ability to add icons on show/hide with smooth transition by adding an active class to the panel heading on show/hide.

Demo Image: Flat Accordion
Demo Image: Flat Accordion

Flat Accordion

Flat accordion in HTML, CSS and JavaScript.
Made by Soufiane Abid
April 12, 2016

Demo Image: Pure HTML And CSS Accordion
Demo Image: Pure HTML And CSS Accordion

Pure HTML And CSS Accordion

Created and designed (in browser) a pure HTML and CSS expandable accordion for fun.
Made by Chris Ota
January 21, 2016

Demo Image: CSS Responsive Animated Accordion
Demo Image: CSS Responsive Animated Accordion

CSS Responsive Animated Accordion

HTML and CSS responsive animated accordion.
Made by Chris Wright
January 19, 2016

Author

  • Rau

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS Accordion

Version 2.0: Redesigned with SCSS and smooth animation. Added a tab "close" in "open one" option to close other tab. Acordeon made with just CSS. Based on checkbox input + label trick to active tabs.

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

Responsive: yes

Dependencies: -

Demo Image: Accordion Navigation
Demo Image: Accordion Navigation

Accordion Navigation

No javascript, no flexbox.
Made by Oliver Knoblich
August 25, 2015

Demo Image: Swanky Little Accordian List
Demo Image: Swanky Little Accordian List

Swanky Little Accordian List

Here's another little CSS creation using the 'Label for' trick.
Made by Jamie Coulter
February 22, 2015

Demo Image: Flexbox Accordion
Demo Image: Flexbox Accordion

Flexbox Accordion

Simple horizontal flexbox accordion.
Made by Arjan Jassal
December 28, 2014

Demo Image: Responsive Animated SCSS Accordion
Demo Image: Responsive Animated SCSS Accordion

Responsive Animated SCSS Accordion

Responsive animated SCSS accordion with some text-background-clipping and linear-background overlay.
Made by MrPirrera
December 11, 2014