After some initial difficulty in getting the functionality and layout working across all modern browsers, I recently wrapped up and included a new profile page to my website.  It’s a concise little bio for me, but the main reason I constructed it was to play around with some jQuery, specifically an accordion panel and a dynamic image gallery.

The difficulty lied in the accordion panel.  My intent was to utilize the accordion widget from jQuery UI.  I built a custom theme using jQuery UI’s ThemeRoller, then after downloading it I further tweaked the CSS to get exactly the look I was going for.  The supplied CSS code was a lengthy file which included a lot of style rules I wouldn’t be needing.  Bascically, I was starting with something complex and trying to trim it down to something more simple.  I had it nearly perfected except the animation between panels was not smooth in most browsers [only worked fine in Firefox].  The shaky / jittery effect I was seeing when it transitioned between panels was unacceptable.

After some research online, I saw that I was certainly not the only person to experience this behavior.  My research led me to a plug-in widget called Kwicks that offered the accordion behavior I was after with smooth animation and less code to modify for my needs.  It even supported custom easing animations in conjunction with the jQuery Easing Plug-in.  This new approach, starting with something simple and adding complexity as needed, worked like a charm.