title: jQuery UI error message: #accordion is not a function
body: <p>I am adding jQuery UI Accordion to a page and get an error in firebug when the page loads saying</p>
  
  <pre><code>#accordion is not a function
  </code></pre>
  
  <p>Here is the jquery code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function() {
  $("a.view-preview").fancybox({
  'titleShow'     : false,
  'transitionIn'  : 'elastic',
  'transitionOut' : 'elastic'
  });
  $("#accordion").accordion({ header: "h3", collapsible: true, active: false });
  $("a.show-categories").fancybox({
  'titleShow'     : false,
  'transitionIn'  : 'elastic',
  'transitionOut' : 'elastic'
  });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is the html code:</p>
  
  <pre><code>&lt;div id="accordion"&gt;
  &lt;div&gt;
  &lt;h3&gt;&lt;a href="#"&gt;First&lt;/a&gt;&lt;/h3&gt;
  &lt;div&gt;Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.&lt;/div&gt;
  &lt;/div&gt;
  &lt;div&gt;
  &lt;h3&gt;&lt;a href="#"&gt;Second&lt;/a&gt;&lt;/h3&gt;
  &lt;div&gt;Phasellus mattis tincidunt nibh.&lt;/div&gt;
  &lt;/div&gt;
  &lt;div&gt;
  &lt;h3&gt;&lt;a href="#"&gt;Third&lt;/a&gt;&lt;/h3&gt;
  &lt;div&gt;Nam dui erat, auctor a, dignissim quis.&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the header from the page that loads:</p>
  
  <pre><code>&lt;head&gt;
  
  
  &lt;!-- meta --&gt;   
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  &lt;meta name="description" content="Rouviere Media - web design and development" /&gt;
  &lt;meta name="keywords" content="web design, development, expression engine, cms, forrest anderson, donna anderson" /&gt;
  &lt;meta name="robots" content="index, follow" /&gt;
  
  &lt;!-- title --&gt;
  &lt;title&gt;Expression Engine, Web Design and Development | Rouviere Media&lt;/title&gt;
  
  &lt;meta name="viewport" content="width=device-width" /&gt;
  
  &lt;!-- css --&gt;
  &lt;link rel="shortcut icon" href="http://ee.rouviere.com/_images/favicon.ico" /&gt;
  &lt;link rel="stylesheet" type="text/css" media="all" href="http://ee.rouviere.com/_css/rou_inside_styles.css"/&gt;
  &lt;link rel="stylesheet" type="text/css" media="all" href="http://ee.rouviere.com/_css/web-custom/jquery-ui-1.8.10.custom.css"/&gt;
  &lt;link rel="stylesheet" type="text/css" media="screen" href="http://ee.rouviere.com/fancybox/jquery.fancybox-1.3.4.css"/&gt;
  
  &lt;!--[if IE 7]&gt;  &lt;link href="http://ee.rouviere.com/_css/rou_ie7.css" rel="stylesheet" type="text/css"&gt;&lt;![endif]--&gt;
  &lt;!--[if IE 8]&gt;&lt;link href="site_url}_css/rou_ie8.css" rel="stylesheet" type="text/css" /&gt;&lt;![endif]--&gt;
  
  &lt;!-- js --&gt;
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://ee.rouviere.com/_js/jquery-ui-1.8.10.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://ee.rouviere.com/fancybox/jquery.fancybox-1.3.4.pack.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
      $("a.view-preview").fancybox({
          'titleShow'     : false,
          'transitionIn'  : 'elastic',
          'transitionOut' : 'elastic'
      });
      $("#accordion").accordion({ header: "h3", collapsible: true, active: false });
      $("a.show-categories").fancybox({
          'titleShow'     : false,
          'transitionIn'  : 'elastic',
          'transitionOut' : 'elastic'
      });
  });
  
  &lt;/script&gt;       
  &lt;/head&gt;
  </code></pre>
  
  <p>I would appreciate some guidance here. Thanks.</p>