How come jQuery UI Tab Widget Does Not Work?

I am using JQuery UI Tabs widget library but it doesn't put the content in tabs as it's supposed to. Why????

I had this question when I was trying to get JQuery UI's tab widget to work. When it works it looks like the following:



I included the necessary JQuery libraries which are basically jquery.js and jquery-ui.js, both of which can be accessed from Google Doc's code repository. I verified that those files are accessed correctly, but I kept not seeing my content put in tabs as jQuery UI API claims to do. After some digging I found that the failure can be due to the following causes:

* You need to include the necessary CSS: jquery comes with a default CSS stylesheet for its UI API, so you can either download it or simply reference it at Google Doc as follows:

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

Note if you download it you'll have to correct the path of each background image URL used in the stylesheet. Those URLs are relative paths, and since you'll be hosting it from a different server they'll be broken. You'll have to prefix it with http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base. You can further theme your tabs in your own CSS definitions. JQuery UI's official API guide has more information at http://docs.jquery.com/UI/Tabs.

* Do NOT use self closing script tag: This is extremely weird, but in my experiment I realized things fall apart when I use self closing script tag as follows:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery-ui.min.js" />

You should instead use the following:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery-ui.min.js"> </script>

Weird huh? I have absolutely no idea why this is the case. If any of you experienced the same thing feel free to enlighten me.

That should solve your problem and jQuery UI's tab widget should start working! Questions? Let me know!