A pure CSS based accordion

What is CSS accordion?

The accordion is the way to present information that generally contains a title and its body contains the content. Normally, it fits the screen size of the users.

In the jQuery section, I showed how you can use the jQuery’s accordion plug-in with examples. It uses JavaScript underway and makes the process pretty easier for creating accordions.

In this tutorial, I will show you creating accordion by using pure CSS3 code. The accordion is super smooth and credit goes to the developer at GitHub website.

A demo of using jquery-like-accordion-by-css3 plug-in

The plug-in package includes a CSS file containing all the specifications for the accordion. Either use it in your external CSS or include that package CSS file or you may use it in <style> tag.

For the demo, I have used it inside the <style> tag:

CSS accordion

See online demo and code

The wrapper class specifies the color, width and margin etc. of the main container of accordion:

.wrapper{

width: 700px;

background: #D1DAE0;

margin: 150px auto;

}

 

While single accordion specifies the properties for heading and content of the accordion:

.single-accordion{

height: 35px;

overflow: hidden;

background: #4D6575;

margin-bottom: 5px;

padding: 0px 10px;

-webkit-transition: all 1s;

}

 

There are many other classes that handle different elements. See the complete CSS and markup in the demo page.

Another style with border-radius and other properties

Following is another style of the CSS accordion where I changed a few other properties like background color and added border-radius for the main wrapper and accordion classes.

The color scheme is also changed. Have a look at the demo and code:

CSS accordion style

See online demo and code

You can see, the heading’s color is also changed as the mouse is brought in the title area of any accordion.

Another style of accordion with blockquote and background image

By using this simple script, look at another style where different CSS properties are changed to the reddish theme. You may use accordion for presenting customers feedback. As an accordion is opened, it will show customer quote with background image set.

In addition to changing the wrapper class, single-accordion, single-accordion:hover, etc. I also added a blockquote style. See the output and code below or in the demo page:

CSS accordion blockquot

See online demo and code

Following is the CSS used in above demo:

<style>

body {

font-family: 'Ubuntu', sans-serif;

font-size: 14px;

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after, q:before, q:after {

content: '';

content: none;

}

.wrapper{

width: 700px;

background: #F8CDCE;

margin: 150px auto;

border-radius:15px;

}

.wrapper h1{

font-size: 40px;

font-weight: bold;

color: #C61C20;

text-align: center;

padding: 20px 0px;

}

.accordion{

width: 650px;

padding: 25px;



}

.single-accordion{

height: 35px;

overflow: hidden;

background: #941417;

margin-bottom: 5px;

padding: 0px 10px;

border-radius:5px;

-webkit-transition: all 1s;

}

.single-accordion:hover{

height: 120px;

border-radius: 10px;

-webkit-transition: all 1s;

}

.single-accordion h2:hover{

cursor: pointer;

background-color:  #490A0C;

}

.single-accordion h2{

color: #fff;

font-size: 30px;

font-variant: small-caps;

line-height: 35px;

}

.single-accordion p{

line-height: 25px;

color: #fff;

text-align: justify;

padding: 10px;

}



blockquote {

background: url(images/bg-quote.png) no-repeat;

color: #fff;

font-style: italic;

border-radius:10px;

padding: 5px 5px 5px 50px;

background-color:#765649;

}

</style>

 

This markup section:

 <div class="wrapper">

<h1>Customer Feedback</h1>

<div class="accordion">

<div class="single-accordion">

<h2>The Cupcakes</h2>

<p><blockquote>

Delicious cup cakes, love it. Delicious cup cakes, love it. Delicious cup cakes, love it. Delicious cup cakes, love it. Delicious cup cakes, love it. Delicious cup cakes, love it.

<cite>Customer Name</cite>

</blockquote></p>

</div>

<div class="single-accordion">

<h2>The accoirdion heading 2</h2>

<p>Text for accordion goes here. Text for accordion goes here. Text for accordion goes here. Text for accordion goes here. Text for accordion goes here. Text for accordion goes here.</p>

</div>

<div class="single-accordion">

<h2>The accoirdion heading 3</h2>

<p>Text for accordion goes here. Text for accordion goes here. Text for accordion goes here. Text for accordion goes here. Text for accordion goes here. Text for accordion goes here.</p>

</div>



</div>

</div>

 

Just go ahead and modify the properties to match the theme of your website. This is really light-weight and smooth plug-in.