Collection of free HTML and CSS accordion code examples: horizontal, vertical, simple, animated, etc

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.

Pure CSS Accordion with Radio Buttons

Only HTML Accordion (No JS)

Accordion

Accordion/Collapse with Pure CSS

CSS Only Semantic Animated Accordion

Accordion

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

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.

Accordion Flexbox

Accordion with Pure CSS and HTML

Accordion

Accordion without Using JavaScript

Accordion Menu With HTML & CSS Only

Simple accordion Menu with HTML And CSS

HTML+CSS Only Accordion

Pure HTML CSS Accordion

No JavaScript Simple Accordion

Accordion Content

Air quotes card mode grid and accordion content.

Accordions Pls

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

Accordion In Js

Accordion in vanilla JS with CSS transition.

Accordion 2.0

Vertical accordion with HTML, CSS and JS.

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.

ARIA Accessible Accordion

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

FAQ Accordion

Minimal FAQ accordion made with little vanilla JavaScript.

Basic Accordion

Basic accordion in HTML, CSS and JS.