How to Turn jQuery Accordion into CSS3 Accordion
http://css.dzone.com/articles/how-turn-jquery-accordion-css3
Have you ever used ordinary accordion plugins in your projects? I
would believe so! 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 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.
download sources
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 an accordion plugin for
out test purposes. See how it works:
Live Demo
That’s all, our own CSS3-based accordion is complete! You can check it in action:
CSS3 accordion demo
But that’s not all for today, as a bonus, I prepared a third demo for you with an animated accordion.
animated accordion demo
In order to do it I recommend disable onclick behavior, and apply new animation:
Conclusion
Now that is all for today. We have just created three different demos:
the first one with jQuery, the second and the third – with pure CSS3. I
hope that you like it. Good luck!
