My jQuery is enqueued properly. So why isn't it working?

Question

I'm just trying to add a simple bit of Show/Hide jQuery to a child theme.

$(document).ready(function(){
 $("#openbtn").click(function(){
  $("#openingtimes").toggle(300);
 });
});

I've saved the above code in a file called buttons.js.

I have then registered and enquequed the script using the following in my functions.php file:

<?php
 if ( !is_admin() ) {
 wp_register_script('buttons',
   get_bloginfo('stylesheet_directory') . '/buttons.js',
   array('jquery'),
   '1.0' );

 wp_enqueue_script('buttons');
 }
 ?> 

In the outputted Source Code, the script seems to have properly loaded.

<script type='text/javascript' src='http://localhost:8888/italina/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
<script type='text/javascript' src='http://localhost:8888/italina/wp-content/themes/italina-responsive-child/buttons.js?ver=1.0'></script>

But the button has no effect.

For good measure, here's the HTML it should be affecting:

<button id="openbtn">Opening Times</button>
        <div id="openingtimes" class="headboxes">
                <p>
                   Mondays: Closed<br />
                   Tues-Fri: Noon-3pm; 5.30pm-10pm<br />
                   Sat-Sun: Noon-10.30pm<br />
                </p>
        </div>

Any help much appreciated.

Answer 1

jQuery scripts in WordPress require no-conflict wrappers.

Instead of this:

$(document).ready(function(){
     $(#somefunction) ...
});

Use this:

jQuery(document).ready(function($) {
    // $() will work as an alias for jQuery() inside of this function
});

So, in your case:

jQuery(document).ready(function($) {
    $("#openbtn").click(function(){
        $("#openingtimes").toggle(300);
    });
});

Answer 2

I would also alter your function to:

function wpa_87661(){
 wp_enqueue_script('buttons',
   get_bloginfo('stylesheet_directory') . '/buttons.js',
   array('jquery'),
   '1.0' );
}
add_action('wp_enqueue_scripts','wpa_87661');

so that you enqueue your script on the wp_enqueue_scripts hook as recommended in the Codex.

And if you have Chrome or Firebug, use the console to check for Javascript errors.