Hello all,

Recently, I began learning JS to start creating websites. So far I have a working idea of what the DOM is & how to access elements within a document.

I've also heard how jQuery & jQuery UI can increase functionality/productivity/interactivity & just about any other "ity" word you can think of.

So, now I'm experimenting with these two libraries by trying to create tabs. From the docs I've read it appears that my code agrees with everything as explained. The problem I'm having seems more technical than conceptual.

I can't get the tabs to display in the page. Firefox 11 gives an error saying:

$('#tabs').tabs is not a function

The code resides inside an external .js file (myTabs.js) linked to the .html file:

$(document).ready(function () {
    $('#tabs').tabs();
});

The HTML so far:

<link rel="stylesheet" type="text/css" href="js/1.7.3/css/ui.1.7.3.css" />
<script type="text/javascript" src="js/jquery.1.3.2.js"></script>
<script type="text/javascript" src="js/ui-1.7.3/ui.core.js"></script> 
<script type="text/javascript" src="js/ui-1.7.3/ui.tabs.js"></script>
<script type="text/javascript" src="js/myTabs.js"></script>

<div id="tabs">
    <ul>
        <li><a href="#description">Description</a></li>
        <li><a href="#examples">Examples</a></li>
        <li><a href="contactMe">Contact me</a></li>
    </ul>    

    <div id="description">
        PANEL 1
    </div>

    <div id="examples">
        PANEL 2
    </div>

    <div id="contactMe">
        PANEL 3
    </div>
</div>

All help & criticism is welcome and appreciated. The page validates properly as HTML5.

Much Thanks!

Member Avatar for stbuchok

I would say to use newer versions of jQuery (1.7.2) and jQuery UI (1.8.18).

Try FireQuery. Its an extension for jQuery developers.

Thanks for the replies. After using both of your suggestions I get the same result.
This time FireQuery says it's not a function.

starting to believe tabs() really isn't a function...

.tabs() becomes a function with (appropriately composed) jQuery UI properly installed on the page.

Either the .js resource file(s) are badly composed or don't exit or the path(s) are wrong.

See fiddle

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.