Post
Ask Question

Building Accordion With CSS3 Without Using Any jQuery or JS

Introduction

 
This tutorial explains "how to build Accordion with CSS3 without using any JS or jQuery".
 
Sample Output: check out This. If you guys like it then this is worth reading. 
 
Let's start.
 
Step 1: Writing the CSS
 
Cascading Style Sheets (CSS) provide styling for web pages. CSS3 is a newer version of CSS. It is not fully supported by all browsers so we need to use the browser prefix with some properties. The main features of CSS3  that we will use in this tutorial are as follows.
 
Transition: It provides a way to control the animation speed and the properties to be animated. It is a kind of effect that occurs when the value of animated property changes.
   
Syntax
  1. transition:[Propertiesto transform][Speed];  
  2. transition:height1s; /* it will animate the height property for 1 second*/  
  3. -webkit-transition:[Propertiesto transform][Speed]; 
To animate all the supported properties we use:
  1. -webkit-transition:all 1s;  /*the `all` is used to animate all properties.*/  
  2. box-shadow: It's a new feature of CSS3 .  It allows casting a drop shadow from the frame of nearly any element as in the following:  
  3.      box-shadow: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]# 
You can read more about this here.
 
The rest of CSS is simple as in the following:
  1. .accd{                      /* accordion class */  
  2. display:block;                  /* for displaying element as block */  
  3. width:auto;                     /*Width according to the height */  
  4. height:42px;              /* Height of the accordion */  
  5. background-color:green;   /* background color of Accordion */  
  6. }  
  7. .title{                           /* Title class */  
  8. border-radius:5%;        /* To give a curve at the corners*/  
  9. padding:1px 0 5px 0;  
  10. color:white;  
  11. height:30px;  
  12. font-size:30px;    
  13. background-color:green;  
  14. -webkit-transition:all 0.5s;    /* For animating all the changes in 0.5 seconds */     
  15. }  
  16. .content{                  /* content class */  
  17. width:inherit;  
  18. border:0px groove black; /*To provide border around the content*/  
  19. position:fixed;  
  20. visibility:hidden;      /* Same as display:none */  
  21. color:#fff;  
  22. -webkit-transition:all 0.3s;  
  23. }  
  24. .content img{                  /* it will hide the image inside content when it is in closed state */  
  25. width:0%;  
  26. height:0%;  
  27. -webkit-transition:all 0.7s;  
  28. }  
  29. .title:hover  .content img{    /* it will show the image inside content when the mouse is hovered on title */  
  30. width:100px;         
  31. height:100px;  
  32. }  
  33. .title:hover  .content{          /* it will open the content box when the mouse is hovered on title */  
  34. visibility:visible;  
  35. color:black;  
  36. box-shadow:+2px +2px 10px #cfe055;  
  37. border:1px solid #cfe055;    
  38. }  
  39. .title:hover{                    /* animation on title */  
  40. height:140px;  
  41. color:black;  
  42. background-color:#CEF6CE;   
  43. } 
Step 2: Writing the HTML
 
The HTML is very simple. We need 2 div tags for one accordion tab; one Div for Title and one for content.
  1. <div class='accd'>  <!-- Main accordion div-->  
  2. <div class='title'>     <!-- Add your title under this div -->  
  3. Title 1  
  4. <div class='content'>   <!-- Add your content under this div -->  
  5. <img src='http://goo.gl/isDKOB' height=100px width=100px style="float:left; "/>  
  6. Hello World Content 1     
  7. </div>  
  8. </div>     
  9. <br>  
  10. <div class='title'>  <!-- Add your second title under this div -->  
  11. Title 2  
  12. <div class='content'>   <!-- Content 2 -->  
  13. <img src='http://goo.gl/isDKOB' height=100px width=100px style="float:left; "/>  
  14. Hello World      
  15. </div>  
  16. </div>  
  17. <br>  
  18. <div class='title'>  
  19. Title 3  
  20. <div class='content'>  
  21. <img src='http://goo.gl/isDKOB' height=100px width=100px style="float:left; "/>  
  22. Hello World      
  23. </div>  
  24. </div>  
  25. <br>  
  26. <div class='title'>  
  27. Title 4  
  28. <div class='content'>  
  29. <img src='http://goo.gl/isDKOB' height=100px width=100px style="float:left; "/>  
  30. Hello World      
  31. </div>  
  32. </div>  
  33. <br>  
  34. <div class='title'>  
  35. Title 5  
  36. <div class='content'>  
  37. <img src='http://goo.gl/isDKOB' height=100px width=100px style="float:left; "/>  
  38. Hello World      
  39. </div>  
  40. </div>  
  41. </div> 
All Done! It's time to run it. 
 
You can check the output here: Output.
 
pic1.PNG
 
Note- You can also try this variant of accordion also.
  1. .accd{         
  2. display:block;  
  3. width:auto;  
  4. height:auto;   
  5. background-image:url('http://goo.gl/isDKOB');  
  6. background-color:green;   
  7. } 
Don't forget to comment :)


Similar Articles