title: JQuery UI some function error TypeError: $(...).accordion is not a function
body: <p>I try to following another ask thread in stackoverflow but nothing result, i got error  TypeError: $(...).accordion is not a function when use accordion function, but for other function JQuery UI like "effect", its working well.</p>
  
  <p>This is my code</p>
  
  <pre><code>&lt;h3&gt;Our Product&lt;/h3&gt;
  &lt;div id="accordion"&gt;
    &lt;div id="accordion"&gt;
    &lt;h3&gt;Section 1&lt;/h3&gt;
    &lt;div&gt;
      &lt;p&gt;Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.&lt;/p&gt;
    &lt;/div&gt;
    &lt;h3&gt;Section 2&lt;/h3&gt;
    &lt;div&gt;
      &lt;p&gt;Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. &lt;/p&gt;
    &lt;/div&gt;
    &lt;h3&gt;Section 3&lt;/h3&gt;
    &lt;div&gt;
      &lt;p&gt;Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. &lt;/p&gt;
      &lt;ul&gt;
        &lt;li&gt;List item&lt;/li&gt;
        &lt;li&gt;List item&lt;/li&gt;
        &lt;li&gt;List item&lt;/li&gt;
        &lt;li&gt;List item&lt;/li&gt;
        &lt;li&gt;List item&lt;/li&gt;
        &lt;li&gt;List item&lt;/li&gt;
        &lt;li&gt;List item&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>in my head.php file, and both of jquery and jquery ui loaded succesfull</p>
  
  <pre><code>&lt;title&gt;&lt;?php echo $title;?&gt; | Mitra Dekor&lt;/title&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;meta name="description" content=""&gt;
  &lt;meta name="keywords" content=""&gt;
  &lt;meta name="author" content=""&gt;
  &lt;link rel="stylesheet" href="&lt;?php echo base_url('assets/css');?&gt;/bootstrap.css" type="text/css"&gt;
  &lt;link rel="stylesheet" href="&lt;?php echo base_url('assets/css');?&gt;/font-awesome.css" type="text/css"&gt;
  &lt;link rel="stylesheet" href="&lt;?php echo base_url('assets/css');?&gt;/owl_003.css" type="text/css"&gt;
  &lt;link rel="stylesheet" href="&lt;?php echo base_url('assets/css');?&gt;/owl.css" type="text/css"&gt;
  &lt;link rel="stylesheet" href="&lt;?php echo base_url('assets/css');?&gt;/owl_002.css" type="text/css"&gt;
  &lt;link rel="stylesheet" href="&lt;?php echo base_url('assets/css');?&gt;/fonts.css" type="text/css"&gt;
  &lt;link rel="stylesheet" href="&lt;?php echo base_url('assets/css');?&gt;/mitradekor.css" type="text/css"&gt;
  &lt;link rel="stylesheet" href="&lt;?php echo base_url('assets/css/jquery-ui');?&gt;/jquery-ui.css" type="text/css"&gt;
  &lt;link rel="stylesheet" href="&lt;?php echo base_url('assets/css');?&gt;/tooltipster.css" type="text/css"&gt;
  &lt;link rel="stylesheet" href="&lt;?php echo base_url('assets/css/themes');?&gt;/tooltipster-light.css" type="text/css"&gt;
  &lt;script src="&lt;?php echo base_url('assets/js');?&gt;/jquery-1.9.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="&lt;?php echo base_url('assets/js');?&gt;/jquery-ui.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script src="&lt;?php echo base_url('assets/js');?&gt;/jquery.contenthover.min.js" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>And this is my js code, i use external file and put it in footer</p>
  
  <pre><code>$( function () {
  $(".owl-carousel").each(function() {
  $(this).owlCarousel({
    items: 10,
    singleItem: true,
    autoPlay: true,
    stopOnHover: true,
    transitionStyle: true
   });
  });
  
   **$( "#accordion" ).accordion({
    heightStyle: "content"
   });**
   });
  </code></pre>
  
  <p>Is there something wrong with my code?</p>
  
  <p>Update this is jsfidlle <a href="http://jsfiddle.net/a0jzt46p/" rel="nofollow">http://jsfiddle.net/a0jzt46p/</a></p>
  
  <p>Thankyou</p>