50+ Pure CSS Accordions {2019 UPDATED}

Pure CSS Accordions – Are you looking for Pure CSS Accordion, If yes then in this post I am going to share hand-picked Pure CSS Accordions for you. Content accordions make a useful design pattern. You can use them for many different things: for menus, lists, images, article excerpts, text snippets, and even videos. Most accordions out there rely on JavaScript, mainly on jQuery, but since the use of advanced CSS3 techniques became widespread, we can also find nice examples that only use HTML and CSS, that make them accessible in environments with disabled JavaScript. You can use these Pure CSS Accordion in your next web based projects.

Pure CSS Accordion

Following are the list of Pure CSS Accordion.

Pure CSS Accordion DEMO

 Pure CSS Accordion

Acordeon made with just CSS. Based on checkbox input+label trick to active tabs. – By raubaca


CSS Accordion DEMO

 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”. – By mxttsco


Pure Css Accordion Menu DEMO

 Pure Css Accordion Menu

Hre is how to create Stylish Pure css Accordion Mneu with out any javascript ! – By anzjoy



Funky Pure CSS Accordion DEMO

 Funky Pure CSS Accordion

Another pure CSS UI Piece here using radio buttons for the active states – By jcoulterdesign


Pure CSS Accordion Nav DEMO

 Pure CSS Accordion Nav

Just a quick navigation bar with an accordion feel using only html and css. – By flizoid


Pure CSS Accordion DEMO

 Pure CSS Accordion

Image accordion only with CSS and color filters using the rgba() function – By emoreno911


CSS Accordion DEMO

 CSS Accordion

Accordion built using all CSS. The :target css selector is used. – By pollardld


Pure CSS Accordion DEMO

 Pure CSS Accordion

– By cssjockey



CSS accordion menu with fading effect DEMO

 CSS accordion menu with fading effect

CSS accordion menu with fading effect. Code for tutorial available on http://alexsblog.org/2014/09/03/css-tips-and-tricks-6-css-accordion-menu/ – By alexdevero


Simple Flat UI CSS Accordion DEMO

 Simple Flat UI CSS Accordion

– By samsurysites


CSS accordion DEMO

 CSS accordion

Simple CSS accordion with animation using checkboxes. No JS! Works on different content heights! Enjoy! – By ekscentrysytet


CSS Accordion DEMO

 CSS Accordion

A css-only accordion menu for /r/css challenge 1 – By villa7


Pure CSS Accordion DEMO

 Pure CSS Accordion

Pure CSS Accordion – By ronaldsvilcins


Pure HTML and CSS Accordion DEMO

 Pure HTML and CSS Accordion

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). – By chrisota


css accordion menu DEMO

 css accordion menu

Css Accordion DropDown Menu – By EnesSefaK



CSS Accordion Bootstrap Form DEMO

 CSS Accordion Bootstrap Form

– By applecool


Pure CSS – Accordion With Input Edit DEMO

 Pure CSS - Accordion With Input Edit

– By jorgebrunetto


Pure HTML+CSS Accordion (Without Javascript) DEMO

 Pure HTML+CSS Accordion (Without Javascript)

– By dandiws


Pure CSS accordion DEMO

 Pure CSS accordion

– By sfi0zy


Pure CSS Accordion Content With Animation DEMO

 Pure CSS Accordion Content With Animation

Just simple example of pure CSS accordion content width animation. I used the checkboxes and ” + ” pseudo for this. – By simtoalev



CSS Accordion: Radio Button Hack (Fixed Height) DEMO

 CSS Accordion: Radio Button Hack (Fixed Height)

This is a CSS only accordion UI component which utilizes a radio button hack. – By jonyablonski


simple css accordion with hover effects DEMO

 simple css accordion with hover effects

– By vavik96


Pure CSS accordion DEMO

 Pure CSS accordion

Pure CSS accordion with perspective folding-animation. – By alexlya


Pure CSS Accordion DEMO

 Pure CSS Accordion

A no-JS accordion UI using the input:checked “hack”. Note: Markup does not validate. – By datuarellano


Accessible CSS Accordion Menus DEMO

 Accessible CSS Accordion Menus

This is my initial stab at a pure CSS accessible accordion menu. – By AndrewGail


Skewed CSS Accordion DEMO

 Skewed CSS Accordion

– By gdeleon101


CSS Accordion: Checkbox Hack (Overflow:Auto) DEMO

 CSS Accordion: Checkbox Hack (Overflow:Auto)

This is a CSS only accordion UI component which utilizes the checkbox hack. Overflow is set to ‘auto’ to allow for vertical scrollbars when content extends beyond fixed height. – By jonyablonski



Pure CSS Content Accordion DEMO

 Pure CSS Content Accordion

Created a purely CSS accordion slider using hidden inputs and child and sibling selectors. No JavaScript required. – now accessible by tabbing. – By davidicus


CSS Accordion: Checkbox Hack (Fluid Height) DEMO

 CSS Accordion: Checkbox Hack (Fluid Height)

This is a CSS only accordion UI component which utilizes the checkbox hack and animates the max-height property, as opposed to the height. This allows for fluid heights in the expanded content, but affects the animation. – By jonyablonski


CSS Accordion DEMO

 CSS Accordion

– By yeco


Pure CSS accordions DEMO

 Pure CSS accordions

– By victordarras


CSS Accordion DEMO

 CSS Accordion

Basic CSS accordion – By devHammed



Pure CSS Accordion (Checkbox Hack) DEMO

 Pure CSS Accordion (Checkbox Hack)

– By cmcg


Pure CSS Accordion DEMO

 Pure CSS Accordion

Pure css Accordion grid using the power of flexbox, yes no Javascript on this one!!! – By Cristiano123


CSS3 Accordion (No Javascript) – Vertical – Single Visible DEMO

 CSS3 Accordion (No Javascript) - Vertical - Single Visible

Pure HTML/CSS3 accordion menus using absolutely no javascript. This version uses vertical accordion type allowing one panel to be visible at a time. – By mraffaele


CSS Accordion: Checkbox Hack (Fixed Height) DEMO

 CSS Accordion: Checkbox Hack (Fixed Height)

This is a CSS only accordion UI component which utilizes the checkbox hack . – By jonyablonski


CSS Only Accordion DEMO

 CSS Only Accordion

Tutorial:http://www.cssreflex.com/snippets/css-accordion/ – By owlsky


CSS Accordion using {:target} selector DEMO

 CSS Accordion using {:target} selector

– By shirazi


CSS Accordion w/:target DEMO

 CSS Accordion w/:target

In this demo by Colin (http://codepen.io/cmcg/pen/DsbqG) he uses form inputs, but IMO form inputs are meant for forms not accordion widgets. In this rebound of Colin’s take I use the CSS property :target instead and remove the inputs and labels previously used in Colin’s demo. Surely you can spice this up further w/a bit of JS sprinkled on top. – By grayghostvisuals



CSS Accordion DEMO

 CSS Accordion

CSS Accordion demo from treehouse CSS Accordian workshop – By fatpandadesigns


CSS accordion slider DEMO

 CSS accordion slider

– By simonjamain


CSS accordion DEMO

 CSS accordion

– By rommelxcastro


CSS Accordion & Tabs from the same markup DEMO

 CSS Accordion & Tabs from the same markup

Same mark-up can be styled as either an accordion or tabs, useful for responsive sites. Doesn’t use absolute positioning which allows for easy nesting – couldn’t find this elsewhere on the web. – By testingonlive


Pure css accordion DEMO

 Pure css accordion

This is a pure css accordion , no js required for accordion. I have built accordion without js to help others. – By dheeruchd



Css Hovered Button DEMO

 Css Hovered Button

Css hovered button icon – By EnesSefaK


CSS Accordion DEMO

 CSS Accordion

I made a JS-free accordion using only CSS radio buttons. I learned about this technique from Ryan Seddon, who has done some amazing things with checkboxes. I couldn’t find a working example of his radio-button–based accordion, so I pieced this one together. – By ragdoll


Process Accordion DEMO

 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. – By devilskitchen


CSS Accordion / Collapsible DEMO

 CSS Accordion / Collapsible

Sinple, JS-free accordion/collapsible component based on :checked CSS seclector. Collapsible can be created with checkbox, and – By yurigor


I Hope you liked Hand-picked list of Pure CSS Accordions, Don’t forget to Subscribe My Public Notebook for more useful Hand-picked HTML and CSS code examples, tutorials and articles.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.