Funky Pure CSS Accordion Menu

In this article, we’re going to creating a funky and stylish pure CSS accordion menu which allows the user to toggle hidden panels by clicking the title bar.

The accordion design is excellent and uses the flat color scheme. It will make your website design more appeal.

Are you looking solution for tabs? Here we have simple CSS tabs which are design with CSS only and responsive.

A different color background has been used for each title to make it unique and look great. It is responsive and works on all media devices.

You don’t need to write all of the code to build a CSS accordion to from start. Just pick the HTML and CSS code and implement on your website to make it ready.

This accordion menu is light weight because it is written in CSS only and you don’t need to use the javascript.

Pure CSS Accordion Menu Markups

Let’s have a look how to build this accordion and first see the HTML. The HTML is designed to understand quickly.

You can see that the toggle function require using the radio button and label.

<div class='right'> <div class='app'> <div class='app_inner'> <input checked='' id='tab-1' name='buttons' type='radio'> <label for='tab-1'> <div class='app_inner__tab'> <h2> <i class='icon ion-android-alarm-clock'></i> 8am - 10am </h2> <div class='tab_left'> <i class='big icon ion-android-color-palette'></i> <div class='tab_left__image'> <i class='icon ion-android-color-palette'></i> </div> </div> <div class='tab_right'> <h3>Jamie talks design</h3> <h4>Monday - Thursday</h4> <p>I talk a bunch of rubbish</p> <button>More information</button> </div> </div> </label> </div> </div> </div> 

Here is complete CSS code to make this accordion to work.

.app { border-radius: 10px; width: 340px; margin: 0 auto; height: 414px; position: absolute; left: 0; top: 50%; box-shadow: 4px 5px 0px rgba(0, 0, 0, 0.11); -webkit-animation: intro 0.34s 0.4s cubic-bezier(1, 1.4, 0.41, 1.01) forwards; animation: intro 0.34s 0.4s cubic-bezier(1, 1.4, 0.41, 1.01) forwards; -webkit-transform: translateY(-50%) scale(0) rotateX(10deg) rotateY(10deg) rotateZ(10deg); transform: translateY(-50%) scale(0) rotateX(10deg) rotateY(10deg) rotateZ(10deg); margin: auto; overflow: hidden; font-family: 'Roboto Condensed', sans-serif; } .app_inner { position: relative; } .app_inner input[type="radio"] { display: none; } .app_inner input[type="radio"]:checked + label .app_inner__tab { height: 175px; } .app_inner__tab { width: 100%; height: 80px; background: red; cursor: pointer; overflow: hidden; position: relative; -webkit-transition: all 0.65s cubic-bezier(1, 0, 0.41, 1.01); transition: all 0.65s cubic-bezier(1, 0, 0.41, 1.01); } .app_inner__tab h2 { position: absolute; right: 20px; top: 16px; color: #1a1c1d; font-size: 18px; } .app_inner__tab h2 i { position: absolute; right: 271px; opacity: 0.3; -webkit-transition: all .3s; transition: all .3s; } .app_inner__tab .tab_right { width: 60%; float: right; position: relative; top: 200px; text-align: right; padding: 20px; } 

This is the few line of CSS; you will find full code in below code pen demo. Also, have a look how it will look like:

See the Pen Funky Pure CSS Accordion by Jamie Coulter (@jcoulterdesign) on CodePen.