$("#myAccordion").accordion is not a function

$("#myAccordion").accordion is not a function

I know it's been asked a million times, and I've looked at all the questions involving it that I can find, but after that, I still can't find out why my simplest jQuery UI functions won't work. I've tried it with the Tabs widget and the Accordion widget, and both produce the following errors in Firebug:

$.widget is not a function
$("#myAccordion").accordion is not a function

Here's my code, into which I've inserted three javascript alerts:




  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="development-bundle/themes/le-frog/jquery.ui.all.css">
    <title>jQuery UI Accordion Widget Example</title>
    </head>

    <body>
    <div id="myAccordion">
      <h2><a href="#">Header 1</a></h2>
      <div>
        <p>Eu fugiat nulla pariatur. Velit esse cillum dolore ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate ut labore et dolore magna aliqua. Cupidatat non proident, lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt. Ut enim ad minim veniam, ullamco laboris nisi ut labore et dolore magna aliqua.</p>
      </div>
      <h2><a href="#">Header 2</a></h2>
      <div>
        <p>Nemo enim ipsam voluptatem nam libero tempore, saepe eveniet ut et voluptates repudiandae sint. Et quasi architecto beatae vitae similique sunt in culpa qui officia deserunt mollitia animi, velit esse quam nihil molestiae consequatur. Id est laborum et dolorum fuga. Omnis voluptas assumenda est, itaque earum rerum hic tenetur a sapiente delectus, omnis dolor repellendus.</p>
      </div>
      <h2><a href="#">Header 3</a></h2>
      <div>
        <p>Whenever single-loop learning strategies go wrong, to focus on improvement, not cost, big is no longer impregnable. Benchmarking against industry leaders, an essential process, should be a top priority at all times measure the process, not the people. Whether the organization's core competences are fully in line, given market realities by adopting project appraisal through incremental cash flow analysis, building a dynamic relationship between the main players. As knowledge is fragmented into specialities presentation of the process flow should culminate in idea generation, motivating participants and capturing their expectations. Whenever single-loop learning strategies go wrong, in a collaborative, forward-thinking venture brought together through the merging of like minds.</p>
      </div>
    </div>
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="development-bundle/ui/jquery.ui.core.js"></script>
    <script type="text/javascript" src="development-bundle/ui/jquery.ui.accordion.js"></script>
    <script type="text/javascript">
        $(function() {
            alert("This is Alert 1");
            $("#myAccordion").accordion();
            alert("This is Alert 2");
        });
        alert("This is Alert 3!");
    </script>
    </body>
    </html>



































Alert 3 displays (first), followed by Alert 1. Alert 2 never displays. I've tried replacing the src for jQuery itself with a CDN for it, but that didn't work.

Can anyone see what I'm doing wrong?