Thread

So I’m wanting to implement a javascript accordion function, and figured I’d use jquery since the mythical EE 2.0 will be quite jQuery friendly.

I’m having a hard time finding a bullet-proof accordion using jQuery though. The demos I’ve seen work fine, but when I try to implement them on my site I’m seeing weird/inconsistent behaviors - sometimes the HTML layout seems to break, sometimes a rollover isn’t registered correctly, things are flashing/blinking unattractively, sometimes the accordion doesn’t slide, it just appears/dissapears.

First I tried rolling my own extremely simple accordion just using toggle(). If I scrolled quickly across all the accordion elements the slide would completely stop working and things would just appear/disappear (or not work at all).  So then I started looking for pre-built plug-ins. I tried debugging a bit, but I’m a jQuery newbie and didn’t accomplish much - these things should ‘just work’, that’s the point of using something like jQuery!

The two best ones I tried are:

Jquery UI accordion (linky link) - problems are sometimes a rollover doesn’t register (i’m using mouseover to trigger it).  Also because there is no delay, if you try to move your mouse you run into the timeless javascript menu problem of triggering a section inadvertently. Also, the entire area isn’t always revealed when an accordion area is selected.

Hover Accordion (linky) - this one looked promising (it is literally exactly the style I am looking for - recreating the accordions on the Apple website).  The problem is the accordion areas are inconsistent - the sometime flash the entire thing, then hide/reshow it.  The effect is jerky and unprofessional looking on my site.  I don’t see these problems on the demo site (I use Safari),  but the demo has a much simpler layout which seems to be affecting things (and in IE6 the demo site actually doesn’t show the entire subnav areas at all which isn’t a good sign).

Does anyone have any experience with implementing jQuery accordions? Any tips/things to look at?  Did you roll your own or use a pre-built plug-in?

Thanks for any thoughts.  I’m just really fed up with spending hours messing around with something that should be a drop-in plug-in.

Greetings,

Do you have a sample of some of your attempts? I would be happy to take a look.

Justin - thanks for the offer.  It seems to be that my CSS was confusing things and so the real height of the div wasn’t being honored and was breaking the layout. In the end I decided this is the perfect time for me to start actually learning jQuery instead of just using a pre-built solution.  This is for a photo gallery, and so the accordion tabs all have multiple thumbs which also need to fire off various javascript functions (loading images, changing links, etc) when they’re selected.  Modifying an existing accordion to actually work under those conditions seemed like it would take as much work as building my own, and I wouldn’t really understand what was going on underneath the hood.

This is a great chance to learn on a real project, and man am I loving jQuery now that I’m delving into it. It seems brilliant to this self-taught hack.

Anytime. jQuery is incredibly powerful. I’m sure you will really enjoy working with it =)