How to get jquery ui tabs working?

Question

At http://docs.jquery.com/UI/Tabs#Example there is a short HTML example of how to use JQuery UI Tabs.

I put the HTML in a local index.htm file.
I downloaded all the CSS and Javascript files, and saved them in local files:
but the closest I can get is the same example without any color in the tabs.
I've looked around for images, etc. but can't find any.
I can even have everything local EXCEPT the CSS file which I get off their server and THEN it works, so it is something in the CSS file that I'm not getting.

What am I not copying locally that the online CSS file has? Has anyone gotten this JQuery UI Tabs to work and have a zip file that works locally?

John_ · Accepted Answer · 2009-01-13 14:15:03Z

12

If your problem is that everything seems to run but the DIVs do not disappear as they should then you have probably run into the same problem I did.

You need to define the class .ui-tabs-hide so that it hides the element. Basically jQuery uses this to hide the elements, rather than doing it manually with display: none. The reason for this is so that it doesn't mess with your display's default setting, which could be block, inline or anything. By adding and removing the class it gives you a more control.

.ui-tabs-hide
{
  display: none
}

answered Jan 13, 2009 at 14:15

John_

2,9813 gold badges33 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kgiannakakis · Accepted Answer · 2009-01-13 13:53:00Z

6

For the UI tabs to work you NEED some CSS. The documentation states the minimum required.

The problem you have with the example theme is because the css file used references other CSS files. You need to copy them all locally. You also need an image under the themes/flora/i folder.

answered Jan 13, 2009 at 13:53

kgiannakakis

104k28 gold badges163 silver badges197 bronze badges

1 Comment

Edward Tanguay Over a year ago

yes, that was it, I downloaded this image and now all works well, thanks: ui.jquery.com/latest/themes/flora/i/tabs.png

Thilo · Accepted Answer · 2011-02-05 03:09:22Z

3

I had the same problem which is why I am here and it took a while to find the problem. Thanks to kgiannakakis answer with the CSS I found on the JqueryUI page this CSS in the source code:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css" type="text/css" media="all" />

Add it BEFORE your main CSS like this for example:

And then you should be fine - it works for me.

answered Feb 5, 2011 at 3:09

Thilo

311 bronze badge

Collectives™ on Stack Overflow

How to get jquery ui tabs working?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related