How to remove/add jQueryUI CSS theme from specific element?

Tags: jquery,css,jquery-ui

Problem :

I have a wordpress site with jQueryUI tabs applied to two different elements of the same page. However, I want one of those elements themed and the other one not.

I tried using .removeClass('ui-widget') but of course it removes the class after applying the jQueryUI, so it's the same as doing nothing.

Another way of solving this could be apply the theme to only one tab, but I also don't know how to do that.

Thanks in advance.

---

Solution :

What do you mean with "Not themed"?jQuery UI tabs are always themed. If you want to differentiate the two different sets of tabs you coul apply your own custom _CSS that overrides your UI theme. This is the markup created by tabs (taken from the docs)

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs">
   <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
     <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Nunc tincidunt</a></li>
      <li class="ui-state-default ui-corner-top"><a href="#tabs-2">Proin dolor</a></li>
   <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1">
      <p>Tab one content goes here.</p>
   </div>
    ...
</div>

Note: This is a sample of markup generated by the tabs plugin, not markup you should use to create a tabs. The only markup needed for that is

<div id="tabs">
   <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>
      <li><a href="#tabs-2">Proin dolor</a></li>
      <li><a href="#tabs-3">Aenean lacinia</a></li>
   </ul>
   <div id="tabs-1">
      <p>Tab 1 content</p>
   </div>
   <div id="tabs-2">
      <p>Tab 2 content</p>
   </div>
   <div id="tabs-3">
      <p>Tab 3 content</p>
   </div>
</div>.

you can use the id of the element to style things.

#tabs ul li{
   background-color: green;
}