CODEWITHSUNDEEP
jquerywordpressfunction
Amy
Amy

Reputation: 317

#accordion is not a function

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.

Upvotes: 4

Views: 12535

Answers (3)

albertopriore
albertopriore

Reputation: 614

Can you show me the full html when you run it on Wordpress. I was thinking that maybe in the include pages there are some unclosed tags that could corrupt the accordion.

<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>

And try to do not insert jQuery twice.

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1074989

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.

Upvotes: 13

thirtydot
thirtydot

Reputation: 228192

You're including jQuery twice, perhaps that's that problem?

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
..
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

Upvotes: 2

Related Questions