0

So I've gotten two different Jquery plugins integrated into my Wordpress theme, but for some reason, when trying to use JQuery's built in accordion feature I've been getting an "undefined is not a function - anonymous function" error in the chrome console. Here is my functions.php code for the registering the jquery script:

function issue_accordion() {
wp_enqueue_script ( 'jquery' );
    wp_register_script ('jquery', get_template_directory_uri(). '/js/jquery.js' );
wp_enqueue_script( 'jqueryui' );
    wp_register_script('accordion', get_template_directory_uri(). '/js/jquery-ui.min.js');
wp_enqueue_script( 'accordion');
    wp_register_style('accordioncss', get_template_directory_uri(). '/jquery-ui.css');
    wp_register_style('accordioncss', get_template_directory_uri(). '/jquery-ui.theme.css');
    wp_register_style('accordioncss', get_template_directory_uri(). '/jquery-ui.structure.css');
    wp_enqueue_style('accordioncss');
}

add_action('wp_enqueue_scripts', 'issue_accordion');

Then this is me calling the script in the .php file:

 <script type="text/javascript">
      jQuery('#accordion').accordion();
</script>

A link to the actual page is here:

http://www.azletconsulting.com/?page_id=13

I can't figure out what the issue would be since the api documentation says the function is .accordion() and I'm properly implementing the no-conflict jquery wordpress method in the same manner as I did with the other two jquery scripts I'm using on the site.

Baroti
  • 67
  • 7
  • jQuery doesn't have a built-in accordion function. jQuery **UI** does. – Samutz Apr 08 '15 at 20:23
  • So I got the Accordion function to work, but now it won't allow me to open or close any tabs. http://www.azletconsulting.com/?page_id=13 – Baroti Apr 08 '15 at 21:53

1 Answers1

0

In your HTML, you're calling jQuery('#accordion').accordion(); before the plugin has been instantiated. This is what's throwing the undefined error.

Tyler Kelley
  • 167
  • 7
  • Shouldn't WP be enqueuing my jquery-ui files in the header though and my script is placed in the body? – Baroti Apr 08 '15 at 20:32
  • I don't know much about the inner workings of Wordpress, but if you view your source the accordion plugin is being instantiated at the bottom of your page, before the `

    ` tag, and well below where you're calling `.accordion()`. I imagine the fix is simply moving some furniture around in your theme.

     – Tyler Kelley Apr 08 '15 at 20:34
  • So I just dropped this in the header.php file: and it seems to have fixed the issue. – Baroti Apr 08 '15 at 20:42
  • Good deal! Though, I would highly suggest putting most, if not all, of your ` – Tyler Kelley Apr 08 '15 at 20:51
  • Now the issue I'm having is that the actual accordion menu isn't animating, and I can't go through the different options. It's just stuck open/closed. I will definitely take a look at that answer about JS and the body tag post though. This is the first time I'm incorporating JS into a theme. – Baroti Apr 08 '15 at 21:01
  • Out of curiosity, which accordion plugin are you using? Also, on your live site you're using the `#accordion` ID as a selector to instantiate the `.accordion()` functionality but that ID doesn't exist in your DOM. – Tyler Kelley Apr 08 '15 at 21:42
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/74762/discussion-between-baroti-and-tyler-kelley). – Baroti Apr 08 '15 at 22:20