If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

JQuery UI tabs not hiding/clearing content when active tab is changed

New to this web developer thing, and I'm looking for some help. I'm re-designing my portfolio website and instead of using a bunch of different static pages, I'm looking to use a tabbed set up to switch between content areas. I want to use the JQuery UI tabs function to do this. I want to click on a heading, and have the content in that tab active, while the other content is hidden until you click on the next tab. Below is the script I'm using:

The problem I am having is that, when I click the different headings in the tabbed menu at the top of my page, the content doesn't change, nor does it hide any of the other tabbed content. It's all there, all the time.

Example: JQuery UI Site
Notice how, when you click the different tabs, it hides the content from the non-active ones. That is my desired end result.

My Page
Notice how all the content is there as soon as the page loads. The tabs I am referring to are the horizontal ones underneath the header image.

I haven't altered the source code any other than the "Styles.CSS" to pass in my style sheet. I've gone through my HTML a few times to see if I'm missing things. I've cleaned it up and both the HTML and the CSS does pass W3c Validation. Not sure where to go from here. Thanks in advance!

$("#tabs") refers to the element having its id attribute 'tabs' but there is no such element in your page source

Thanks for the reply. I think I understood what you mean, but just in case I tried a few different things:

-Changed the element from "tab" to "tabs" in the page source- It didn't solve the content issue and also "broke" the CSS
-Changed the CSS name element to a few different things to pass in that style from the CSS- content did not hide, and the CSS elements did not take.
-Commented out the offending "tab" section in the CSS that seems to be breaking the tab function- content still not hidden.

IS there something I'm missing, about passing a CSS class onto an element in the page?
For example:
If i want the CSS properties to apply to the element <div id="tabs">, so i create a <div id="MenuItem"> in the page source before the "tabs" div to call in the "MenuItem" class, will one break the other?
Is there an easier way to pass class elements from an external CSS sheet into a page element?

Regardless, I've changed the names around and compared it to the source code and it's still not hiding the content.