Solving jQuery UI Tab Widget Issues in MINUTES!

Amazon I am using JQuery UI Tabs widget library but it doesn't put the content in tabs as it's supposed to. Why? I ran into this issue 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 just did NOT see my content put in the tabs as jQuery UI API claims to do. After some digging I found that the failure can be due to the following causes.

Cause #1
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 may 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.

Cause #2
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 such 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 right? I have 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!