Question

I’ve been using http://jqueryui.com/themeroller/ for my site and it works fine but for one thing. I want to have a two different layout/design for the accordion UI. How can I accomplish this?

Any suggestion would be very much appreciated.

Thanks

Answer 1

You probably shouldn’t, since the point of a unified set of widgets is to promote consistency. However, I realize that’s not your question and you might have reasons.

The “easiest” way to do it is to add a special ID or class to your “alternate” accordion. Then in your CSS you are going to have to have more specificity in order to override the existing one. I would personally avoid adding it directly to your themeroller CSS; add it somewhere else like your site CSS so that Themeroller styles are easily maintained.

So, where jQuery UI automatically applies something like:

.ui-accordion-header { /* original themeroller styles */ }

you would need to be more specific to give your own rules greater priority:

.customClass .ui-accordion-header { /* override the parts you need to */ }

I can tell you this: it’s going to be a pain. jQuery UI adds a tonne of classes, each with some relatively modular purpose. Overriding all of those to enable another look and feel on a different accordion is going to be some work.