Creating an accordian with CSS3 only

Today i gonna to tell how to create accordion only CSS3 without require Jquery or javascript. By using

  • :target   – pseudo class
  • -webkit-transition    – Property

It works on modern browsers (CSS3 Compatible – Webkit based browsers) .In my example accordion parent div has unique ID. Each accordion must have header and content section. The header includes a link that matches the section’s ID. Whenever clicks the header section it will handle the height of the section and it can be achieved by :target and -webkit-transition.

HTML:

CSS:

 
Demo and Download
 

Don’t forget to subscribe for my new updates. i write this post with reference of Paul Hayes blog.