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
- Bootstrap Accordions
- jQuery Accordions
- React Accordions
- Tailwind Accordions
- HTML <details> & <summary> with CSS
Links
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: -
Links
Made with
- HTML / CSS
About a code
Pure CSS Accordion with Radio Buttons
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Only HTML Accordion (No JS)
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Accordion
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
Accordion/Collapse with Pure CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
CSS Only Semantic Animated Accordion
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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: -
Links
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: -
Links
Made with
- HTML / CSS
About a code
Accordion Flexbox
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Accordion with Pure CSS and HTML
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Accordion
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: ionicons.css
Links
Made with
- HTML / CSS
About a code
Accordion without Using JavaScript
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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
Links
Made with
- HTML / CSS
About a code
Simple accordion Menu with HTML And CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
HTML+CSS Only Accordion
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Pure HTML CSS Accordion
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
No JavaScript Simple Accordion
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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
Links
Made with
- HTML/Pug
- CSS/SCSS
- JavaScript/Babel (Vue.js)
About the code
Accordions Pls
Vertical accordion with HTML, CSS and JS (Vue.js).
Links
Made with
- HTML
- CSS/SCSS
- JavaScript
About the code
Accordion In Js
Accordion in vanilla JS with CSS transition.
Links
Made with
- HTML
- CSS
- JavaScript
About the code
Accordion 2.0
Vertical accordion with HTML, CSS and JS.
Links
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.
Links
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.
Links
Made with
- HTML / CSS / JavaScript
About the code
FAQ Accordion
Minimal FAQ accordion made with little vanilla JavaScript.
Links
Made with
- HTML
- CSS/SCSS (Animate.css)
- JavaScript (jQuery.js)
About the code
Basic Accordion
Basic accordion in HTML, CSS and JS.
Simple Accordion Concept
HTML, CSS and JavaScript simple accordion concept.
Made by Kyle Brumm
March 24, 2017
Funky Pure CSS Accordion
Another pure CSS UI Piece here using radio buttons for the active states.
Made by Jamie Coulter
March 19, 2017
Expanding Horizontal Accordion In React
A quick alternative to the standard 'Accordion' pattern, built completely with React.
Made by Sean
January 7, 2017
Links
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
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
3D Accordion
Simple accordion with 3D folding paper effect in HTML, CSS and JavaScript.
Made by Pawe Targoski
June 13, 2016
Links
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.
Flat Accordion
Flat accordion in HTML, CSS and JavaScript.
Made by Soufiane Abid
April 12, 2016
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
CSS Responsive Animated Accordion
HTML and CSS responsive animated accordion.
Made by Chris Wright
January 19, 2016
Links
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: -
Accordion Navigation
No javascript, no flexbox.
Made by Oliver Knoblich
August 25, 2015
Swanky Little Accordian List
Here's another little CSS creation using the 'Label for' trick.
Made by Jamie Coulter
February 22, 2015
Flexbox Accordion
Simple horizontal flexbox accordion.
Made by Arjan Jassal
December 28, 2014
Responsive Animated SCSS Accordion
Responsive animated SCSS accordion with some text-background-clipping and linear-background overlay.
Made by MrPirrera
December 11, 2014