Noah Blumenthal's Blog

September 10, 2008

jQuery Accordion — whitespace issue with list

Filed under: Uncategorized — noahblu @ 6:07 pm
Tags: , ,

Choffi has this cool side-bar navigation using an accordion (the idea was taken mainly from apple’s website which has a similar thing) that’s supposed to look something like:

This is what it should look like

This is what it should look like

I’m using jQuery 1.2.6 and jQuery UI 1.5.2.  Everything looks fine in FF, but when I open it in IE7 it looks really bad (although it works):

What's with all the white space?


After some tinkering, I tracked the issue down to the fact that the Accordion sticks a span element before and after each of my list items (<li>Test</li> becomes <span></span><li>Test</li><span></span>) which is forcing everything down I suppose because my li styles indicate the use of background images.  I just LOVE FireBug (

Anyway, I edited the ui.accordion.js file to read:
if (!this.options.disableLeftSpan)
$(“<span class=’ui-accordion-left’/>”).insertBefore(options.headers);
if (!this.options.disableRightSpan)
$(“<span class=’ui-accordion-right’/>”).appendTo(options.headers);

on lines 42-45 — basically I just added an if statement before both the left & right spans are added.  Now I can make my call like so (notice the disableLeftSpan & disableRightSpan):

active: false,
event: ‘mouseover’,
fillSpace: true,
disableLeftSpan: true,
disableRightSpan: true

and it looks good even in IE7!

I submitted a bug to the jQuery UI team, but until someone integrates these changes, it’s easy to do yourself.


Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Create a free website or blog at

%d bloggers like this: