Collection of free HTML and CSS accordion code examples: horizontal, vertical, simple, responsive, animated, …
Examples that use Jquery, html, css, javascript, etc. The collection covers Vertical and Horizontal Accordions Demonstration
Table of Contents
Accordion in vertical list
See the Pen Swanky little accordian list by Jamie Coulter (@jcoulterdesign) on CodePen.
Accordion design for simple web
Horizontal CSS Accordion
Accordion CSS template
See the Pen Funky Pure CSS Accordion by Jamie Coulter (@jcoulterdesign) on CodePen.
CSS accordion for products
CSS expandable accordion
See the Pen Simple Accordion Concept by Kyle Brumm (@kjbrum) on CodePen.
CSS accordion for profiles
Accordion Pure CSS
See the Pen Pure CSS Accordion by Eduardo Moreno (@ emoreno911) on CodePen.
Simple accordion
See the Pen Simple accordion by Antony Doyle (@antonydoyle) on CodePen.
Colored CSS Accordion
See the Pen Sassy Accordion by Jeremy Hawes (@jhawes) on CodePen.
Animated Responsive CSS Accordion
See the Pen Responsive Animated SCSS Accordion by MrPirrera (@pirrera) on CodePen.
Responsive CSS Accordion
See the Pen Responsive Accordion (Background Images) by Michael Ferry (@ferry) on CodePen.
Accordion CSS
See the Pen Pure HTML and CSS Accordion by Chris Ota (@chrisota) on CodePen.
Accordion CSS
See the Pen accordion gallery zoom animation (css, responsive) by Daniel Subat (@bbx) on CodePen.
CSS accordion with images
See the Pen Images Accordion by Aymen (@aymenjoe) on CodePen.
CSS flexbox accordion
See the Pen Flexbox Accordion by Arjan Jassal (@arjancodes) on CodePen.
Accordion CSS FAQ frequently asked questions
See the Pen FAQ by Katherine Kato (@kathykato) on CodePen.
Accordion with characteristics
Accordion CSS 3D
Accordion Pure CSS
Accordion with hover effects
See the Pen simple css accordion with hover effects by vavik (@ vavik96) on CodePen.
Skewed CSS Accordion
See the Pen Skewed CSS Accordion by Gerald De Leon (@ gdeleon101) on CodePen.
Accordion with colors
CSS menu with process
Horizontal accordion
CSS Accordion
See the Pen CSS Accordion by Felix Franzén (@Felixfranzen) on CodePen.
Accordion frequently asked questions
See the Pen CodePen Challenge details and summary by Monica Wheeler (@frogmcw) on CodePen.
Collapsible accordion
See the Pen Animated Collapse / Expend Component by Elior Tabeka (@eliortabeka) on CodePen.