Collection of free Hand-picked 47 CSS Accordion. Vertical and Horizontal demos are included with some animations. Demos written using HTML, CSS, and JavaScript.
Table of Contents
Related posts
Vertical Accordion
About the 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.
About the Code
CSS only Accordion (No JavaScript)
This page was written in HTML and CSS. The CSS was compiled from LESS.this could all be done in plain HTML and CSS. Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. The accordion can be manipulated with Javascript (if needed) by changing the “checked” property of the input element.
About the Code
Pure HTML and CSS Accordion
Created and designed (in the browser) a pure HTML and CSS expandable accordion for fun. I tried to think outside of the box when designing this (no pun intended).
I used a (hidden) checkbox to toggle the expanding and collapsing of each panel. I am not fully satisfied with the animations, but I will revisit that at a later time.
Caveat: Each section opens and closes independently of each other. Created for desktop only—I haven’t checked mobile.
About the Code
Feature Slider
About the Code
Funky Pure CSS Accordion
Another pure CSS UI Piece here uses radio buttons for the active states.
About the Code
CSS Accordion
A CSS-only accordion menu for /r/css challenge 1. Accordion menu with only HTML and CSS
About the Code
Smooth Accordion Dropdown Menu
About the Code
CSS Responsive animated Accordion
Originally when I first made this I just wanted to make an animated accordion with mostly CSS and some simple javascript. I’ve since added Aria roles and fixed up that Javascript to work better.
About the Code
CSS + HTML only Accordion Element
Read the copy in the accordion sections for some info about how this was made.
About the Code
Sassy Accordion
Simple CSS only accordion built with Sass primarily for dynamic color scheming.
About the Code
Smooth Accordion using Greensock
Accordion that animates from height: 0 to height: auto with the help of Greensock’s TweenLite.
About the Code
Process Accordion
I was looking for some way to illustrate a customer journey in a more interesting way. I decided to do it as an accordion—and from there is seemed natural to do it in CSS and HTML only.
Once again, I am using radio buttons to trigger the changes; the numbers are using CSS counters (which I have never used before); there are a couple of small transitions on the open effect.
The only annoyance is that the accordion item heights must be defined for the transition to work: you can set height: auto; instead, but the transition is instant.
About the Code
Smooth Accordion using Alpine.js (w/ x-for) + Tailwind CSS
About the Code
Accordion like Apple.com
Decided to do an accordion-like can be seen on Apple.com product pages and use Bootstrap 4 as my foundation.
About the Code
No JavaScript, Simple Accordion
Horizontal Accordion
About the Code
CSS only horizontal accordion
vanilla CSS horizontal accordion and toggle with flexbox usage may be used on the staff, team, or showcase page.
About the Code
How to Build an Accordion Component With the CSS Checkbox Hack
In this short tutorial, we’ll learn how to build a CSS-only flexible accordion component by taking advantage of the “CSS checkbox hack technique”. Most importantly, our component will be fully responsive and its layout will switch between horizontal and vertical depending on the viewport size.
Along the way, we’ll discuss how the CSS Checkbox Hack works, and look at some other Checkbox Hack inspiration from developers on CodePen. Sound interesting?