Ah, the much loved but often over used accordion. It has its time and place but we need to be sure we are actually facilitating the content or design and not just using it as a spiffy animation. When the content says “hey there, I’m an accordion” by all means use it. But, regardless of your need, or lack there of, for an accordion, a lot can be learned about jQuery from building one from the ground up. This time around, we’ll be taking advantage of jQuery’s animation and event functions. So let’s dive right in.

Please note: This tutorial assumes basic knowledge of HTML, CSS, and basic jQuery usage and syntax.

View the demo.

So as you can see from the demo, we are going to  be coding up your standard accordion. Nothing too amazing there but in addition to that we’ll be spicing it up a bit. Using jQuery’s .css( ) function, it is easy to add icons to indicate that the item is expandable and collapsible. This adds a bit of style but also increases the user experience. It’s important that if we are going to add functionality to our site we need to let the user know that the functionality is there.
Read the rest of this entry »