How to turn jQuery accordion into CSS3 accordion

Have you ever used ordinary accordion plugins in your projects, I believe that yes, and, most of them use javascript to work (or jQuery). Usually we use such plugins (accordions) to build a promo with images, a little photo gallery, or in case if we have to build an advertisement with a list of product features. We did some research and came to the conclusion that sometimes we don’t need to use any script in order to build accordions. We can just use the power of CSS3. We can handle the OnClick event and use custom animation.

I prepared three versions with accordions. For the first demonstration we use jQuery to build an accordion. I selected liteAccordion jQuery plugin (http://nicolahibbert.com/demo/liteAccordion/) as a accordion plugin for out test purposes. Look how it works:

In the header we added all the necessary libraries and styles (jQuery, jquery.easing and liteAccordion library) as well as accordion initialization code. In the body section we can see basic accordion structure (OL-LI list) with slides. I think that this is one of usual structures for accordions.

Now, I think that it is the very time to start turning it into pure CSS3 accordion. In the beginning – we have to remove all JS scripts from our page, we can remove liteaccordion.css as well. We are going to prepare our own CSS styles. Also, we have to add <A> links to the headers of our slides (because we should be able to switch between slides). In the result we should get something like that:

As you can see – I added several <span> objects. By default – all of them are hidden, but we have to use them in order to handle onclick events. Now, we are ready to start writing own styles for our CSS3 accordion. Firstly, we have to define styles for our parent object and inner spans:

Now I’d like to show you how to display a counter object in every header. I’m going to use :after pseudo element. I hope that you know that :after selector inserts content after the selected element, so we can do something like that:

Thanks for showing how to convert the menu from jQuery to CSS only. This works on hover, but what about tablets that don’t have hover and people who navigate by keyboard? I tried to use the accordion with my keyboard, but couldn’t tab to any of the slides. On my Android mobile, all I see is a black screen.

Hi Deborah,
Yes, it is obvious that we can not use :hover for Android devices, because we can work only with a touch screen, but, in that case we can rely on :active selector to find an element which is touched (active).
Plus, you should take into account that a phone screen has much less resolution than you have on ordinary desktop computer.

Hi,thanks for your useful tutorial , I have a few problem
with javascript accordion menu , i wanna each images have a link to a page from my website , when i turned the links into code , the accordion menu doesn’t work
so i need some help
thanks a lot , this is the code i used
home
aboutus

Hello I having problems with auto animation accordion… It will not show all my images except the first one and there no delay between images… In other words not doing exactly what the demo does… Other than that very cool tutorial…

Hello there! My name is Andrew and I have been doing web development for years. Frankly, not only web-development, and system-development too. This site is the place where I get to teach and share my experience for the web. Read more