jQuery UI Accordion - How to remove style completl

Question

I love the functionality of the jQuery accordion (http://jqueryui.com/demos/accordion/) however I do not want the style !!

I'd like to get rid of all the styles, the img, the border, the color, etc...

I don't see an option for this, this is something they should add. Or I am mistaking?

Answer 1

To remove default style use clearStyle option:

 $( ".selector" ).accordion({ clearStyle: true });

Answer 2

If your'e not interested in the ui-theme (like me) then don't include the theme css files

Answer 3

You dont generally do this via js thats why ther eis no option. You override the css. Check out the base css file and search for .ui-accordian.. there will also be styles scoped to some geenral .ui-widget classes you need to override. I usually load it up in Firebug and take a look at whats being applied so i know everything i need to overried to give it my look and feel.

Answer 4

I needed (wanted) to do the same thing. In my case I wanted to remove the extra padding the default css provides for accordion-content, which looks like this:

.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; }

In MY css I simply added this:

 .ui-accordion .ui-accordion-content {padding: 0;}    

This successfully set (overrode) just the padding.

Rob

Answer 5

I guess you have already solved the problem since you wrote in 2010. By the way, now it's possible to avoid styling of each ui widget by control panel, in the official jqueryUI website, before download the theme.

http://jqueryui.com/themeroller/

In case of Accordion, just 'uncheck' the checkbox button 'Accordion' and download the generated file.

It's quite late to answer I know but I think it could be useful... just in case :)

Answer 6

Forget all theese tricks, overrides or other pains.

You just have to provide a css scope when you donwload your theme, like: .jquerythemeon

and then put the class to all elements you want to be themed

EDIT: I got some bugs with scope today, in structure.min.css the scope was always generated with "jquerythemeon" and not ".jquerythemeon". To fix it just replace all occurences