jQuery UI Accordion - How to remove style completly?
Solution 1
You can make your own accordion. Using the jQuery accordion without the UI is pointless. Creating your own accordion adapted to your site is kind of easy. You just need to fix the way you want to build it...let's say:
<div id='container'>
<a href='javascript:;'>First link</a>
<div class='content'> SOME CONTENT HERE </div>
<a href='javascript:;'>Second link</a>
<div class='content'> SOME CONTENT HERE </div>
...
</div>
Then, you just need to make something like
//On click any <a> within the container
$('#container a').click(function(e) {
//Close all <div> but the <div> right after the clicked <a>
$(e.target).next('div').siblings('div').slideUp();
//Toggle open/close on the <div> after the <a>, opening it if not open.
$(e.target).next('div').slideToggle();
});
You can now edit your class as you want since you actually don't need them for the JavaScript. Note that the with the class 'content' can contain whatever you want, including , other or since the .siblings and .next only apply to the same hierarchy.
Solution 2
If your'e not interested in the ui-theme (like me) then don't include the theme css files
Solution 3
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
Solution 4
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 :)
Solution 5
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.
Etienne Dupuis
//Français Je suis un specialiste du inbound marketing. J'adore la conception web. Particulièrement jQuery et PHP. Je suis fondateur d'une agence web à Sherbrooke, Lotus Marketing. Nous offrons de la conception web, des stratégies de marketing internet à Sherbrooke et de l'hébergement web, au Quebec. //English I'm a certified Google PPC and SEO specialist. I'm also passionate about web programming and love jQuery / PHP. I'm leading an innovating marketing agency in Sherbrooke, Lotus Marketing. Offering Web Design, SEO and PPC in Quebec, Canada. LinkedIn - Twitter - Google+
Updated on March 11, 2020Comments
-
Etienne Dupuis about 4 years
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?