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;
}

    CSS Howto..

    How can I align the tops of two paragraphs in this example without resorting to an empty header? (e.g.,

     

    )

    Why does the dropdownlist show under the div

    How to get the element position after css-translation

    How to change the width of a CSS flex-box column?

    How to fully stretch 2 embeded divs?

    How to style nested panel controls in ASP.NET

    How do I simulate a hover with a touch in touch enabled browsers?

    How to make the width of a div in the middle responsive

    Woocommerce CSS - How do I address Payment Methods, so I can tweak/CSS it

    Text overlay over image on hover. How to stop other divs from moving

    How to add external CSS to HTML 'style'

    How to select an element's great-grandchild for CSS rules?

    How do I create a pattern overlay in CSS

    How to stop a webpage from loading until all jQuery load functions are complete?

    How to fill an entire area in the body?

    How to get relative CSS from photoshop artboard?

    how to transform in both X & Y direction with CSS Only [duplicate]

    How to use Custom Fonts using CSS?

    How to make div blocks not floating using CSS?

    How to use first-child?

    how to get value from this html date-ranger?

    How to say that you need to turn your mobile phone in javascript/css? [closed]

    how to make the parent width equals the width of all element inside it?

    JQuery function to show element dependent on the value of hidden HTML input element

    How to load css and js

    How to animate a ball travelling pre-defined paths in HTML5, Javascript and CSS?

    Element width based on how many siblings are present

    How to position the tip arrow of bootstrap popover next to a text field- CSS/Jquery

    How to make height squeeze with css

    How to use css with UIWebView?