This page contains a collection of CSS accordion examples that you can use in your web projects. The examples include HTML markup, CSS styles, and JavaScript code. 2 new updates on May 11, 2020
These free CSS accordion examples are perfect for inspiration when creating your own accordion menu.
jQuery accordion
Simple jQuery accordion.
![16 Free CSS Accordion Examples for Inspiration 1 16 Free CSS Accordion Examples for Inspiration 1](https://www.w3tweaks.com/wp-content/uploads/2020/05/jQuery-accordion.gif)
Developed using HTML, SCSS, jQuery
Author: Johan Mouchet | Created on August 19, 2016 | Updated on August 20, 2016
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”.
![16 Free CSS Accordion Examples for Inspiration 2 16 Free CSS Accordion Examples for Inspiration 2](https://www.w3tweaks.com/wp-content/uploads/2020/05/css-accordion.gif)
Developed using HTML, SCSS
Author: Matthew Scott | Created on October 22, 2016 | Updated on September 15, 2019
Pure Accordion Menu using CSS
![16 Free CSS Accordion Examples for Inspiration 3 16 Free CSS Accordion Examples for Inspiration 3](https://1.bp.blogspot.com/-rq0uKx8KITg/WZ4jKpYkpsI/AAAAAAAABbU/dDr3WqltUVUWmcTNFKjulWBI0Fq_tWAZQCLcBGAs/s1600/demo1.gif)
Here is how to create Stylish Pure Accordion Menu using CSS with out any javascript !
Developed by Anz Joy
Funky Accordion using only CSS
![16 Free CSS Accordion Examples for Inspiration 4 16 Free CSS Accordion Examples for Inspiration 4](https://4.bp.blogspot.com/-u-xwj8FWO1k/WZ4wLYesf_I/AAAAAAAABbk/Q_jD9EmbqAofXyzWhSlg3YasjChmNm3rQCLcBGAs/s1600/demo2.gif)
Another pure CSS UI Piece here using radio buttons for the active states
Developed by Jamie Coulter
Accordion menu
![16 Free CSS Accordion Examples for Inspiration 5 16 Free CSS Accordion Examples for Inspiration 5](https://4.bp.blogspot.com/-QMMSG0rt7tE/WZ48qu-lkvI/AAAAAAAABcE/Pes6Yie7RlgHgfBtpktX2UnPxS8ErawmwCLcBGAs/s1600/demo3.gif)
Just a quick navigation bar with an accordion feel using only html and css.
Developed by Floyd Hawkes
Pure CSS Accordion
![16 Free CSS Accordion Examples for Inspiration 6 16 Free CSS Accordion Examples for Inspiration 6](https://2.bp.blogspot.com/-tF8DTYrl1iE/WZ5BEahaxAI/AAAAAAAABcc/2QR_Xxkn0fYBccqFxFd51AmKlB9omu42gCLcBGAs/s1600/demo4.gif)
Image accordion only with CSS and color filters using the rgba() function
Developed by Eduardo Moreno
Simple Flat UI Accordion
![16 Free CSS Accordion Examples for Inspiration 7 16 Free CSS Accordion Examples for Inspiration 7](https://2.bp.blogspot.com/-UcoZ4sJGU0Y/WZ5HYeRYjNI/AAAAAAAABc4/_yrnjTNdl1gQTI3KCHvmgV-UrjSwcBLVACLcBGAs/s1600/demo5.gif)
Simple Flat UI Accordion
Developed by SAMSURY ID
Simple accordion CSS with hover effects
![16 Free CSS Accordion Examples for Inspiration 8 16 Free CSS Accordion Examples for Inspiration 8](https://4.bp.blogspot.com/--SOhphFs6Ng/WZ5Km22XJnI/AAAAAAAABdU/YmcxzuLfc6E_VUwc5oP_P5LqHRILMMEyACLcBGAs/s1600/demo6.gif)
simple accordion CSS with hover effects
Developed by vavik
Clean Accordion Menu using CSS
![16 Free CSS Accordion Examples for Inspiration 9 16 Free CSS Accordion Examples for Inspiration 9](https://4.bp.blogspot.com/-KdkjB9gXAQc/WZ-Cxdf1OUI/AAAAAAAABdw/TNIQ2Wq3e0Y2aTfSZQvuuddos-f6t2PrgCLcBGAs/s1600/demo7.gif)
Acordeon made with just CSS. Based on checkbox input+label trick to active tabs.
Developed by Raúl Barrera
Accordion using HTML and CSS
![16 Free CSS Accordion Examples for Inspiration 10 16 Free CSS Accordion Examples for Inspiration 10](https://3.bp.blogspot.com/-weCOKjxHRWE/WZ-KkgVuReI/AAAAAAAABeA/KtIMRieatmMcBQmjmX6Y5fMaaiUqvQlhgCLcBGAs/s1600/demo8.gif)
Created and designed (in browser) a pure HTML and CSS expandable accordion for fun. I tried to think outside of the box when designing this (no pun intended).
Developed by Chris Ota
CSS menu accordion
![16 Free CSS Accordion Examples for Inspiration 11 16 Free CSS Accordion Examples for Inspiration 11](https://1.bp.blogspot.com/-16EMaz_RSOc/WZ-MVt0YskI/AAAAAAAABeM/-rlqCYtNc98mZ_oo0d-AwlUQ49Bc9ezyACLcBGAs/s1600/demo9.gif)
CSS DropDown Accordion Menu.
Developed by Enes Sefa
Skewed Accordion
![16 Free CSS Accordion Examples for Inspiration 12 16 Free CSS Accordion Examples for Inspiration 12](https://4.bp.blogspot.com/-ScXfY98EBE8/WZ-QsAJkNaI/AAAAAAAABeY/miB9BUEtKMormC0sLJ0nwvj0Voap9QKgwCLcBGAs/s1600/demo10.gif)
Skewed Accordion.
Developed by Gerald De Leon
Pure colorfull accordion
![16 Free CSS Accordion Examples for Inspiration 13 16 Free CSS Accordion Examples for Inspiration 13](https://3.bp.blogspot.com/-B-QTSl6egII/WZ-SVU15MQI/AAAAAAAABek/cUpAD5KLUBEb1_lsVL-K2RBz-9oeU5K3QCLcBGAs/s1600/demo11.gif)
Pure accordion.
Developed by Atfli-Houcine
Process Accordion
![16 Free CSS Accordion Examples for Inspiration 14 16 Free CSS Accordion Examples for Inspiration 14](https://2.bp.blogspot.com/-ge9j-IJwh4A/WZ-UKL6XFnI/AAAAAAAABew/eVMlmlXx7DgmkjLjiedh9i4LM9bAFUGfgCLcBGAs/s1600/demo12.gif)
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.
Developed by Chris Mounsey
CSS accordion slider
![16 Free CSS Accordion Examples for Inspiration 15 16 Free CSS Accordion Examples for Inspiration 15](https://3.bp.blogspot.com/-FFkSeWNOTOY/WZ-V1CeDPgI/AAAAAAAABe8/MvqQtV9347wDIRp8YT41tmCUxmw7H6g6ACLcBGAs/s1600/demo13.gif)
CSS accordion slider.
Developed by simon
CSS Accordion
![16 Free CSS Accordion Examples for Inspiration 16 16 Free CSS Accordion Examples for Inspiration 16](https://4.bp.blogspot.com/-ZYzjdQ8ogbM/WaDkYuFv1YI/AAAAAAAABfY/GcxpEDdOQDIjt-JvcNtKV26zfb9-pGhjACLcBGAs/s1600/demo14.gif)
Created a css accordion using the label and input method. This was forked from Eric – http://codepen.io/ejsado/pen/GLKJd/ but modified to work of lists rather than divs.
Developed by Farid Mokraoui
Leave a Reply