#accordion is not a function

Question

Got a problem with an accordion script, the accordion worked when I was working with it with straight html, but now having moved to wordpress the accordion has stopped working.

Here is my code

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  <script>
  $(document).ready(function() {
    $("#accordion").accordion();
  });
  </script>
<?php wp_head(); ?>

and the html:

            <div id="accordion">
 <div class="button"><a href="#">Infrastructure</a></div>
    <div><?php
            if (function_exists('iinclude_page')){
                iinclude_page('sectors/infrastructure');
            }?>
            </div>
    <div class="button"><a href="#">Housing</a></div>
    <div><?php
            if (function_exists('iinclude_page')){
                iinclude_page('sectors/housing');
            }?></div>
                <div class="button"><a href="#">Education</a></div>
    <div><?php
            if (function_exists('iinclude_page')){
                iinclude_page('sectors/education');
            }?></div>
                <div class="button"><a href="#">Health</a></div>
    <div><?php
            if (function_exists('iinclude_page')){
                iinclude_page('sectors/health');
            }?></div>
</div>

I really do not understand the problem, as it worked in straight html. I have even tried removing the include function with straight text and it still doesn't work?

Any ideas? There are no other jquery objects interfearing either.

Answer 1

You're loading jQuery twice (1.5 followed by 1.7.1), and loading jQuery UI after loading 1.5 but before loading 1.7.1. So here's what happens:

1. jQuery 1.5 is loaded.

2. jQuery UI is loaded and attaches itself to the jQuery object that exists at that point.

3. jQuery 1.7.1 is loaded, completely replacing the jQuery object.

4. Your code runs, using the (1.7.1) jQuery object, which jQuery UI hasn't added its goodness to.

If you load jQuery just once, and make sure you load jQuery UI afterward, it'll work.