Why doesn't this jQuery image map not work on WordPress

Question

Hello I have made a jQuery image map on codepen but when I transfer it to my clients WordPress install it no longer works?

The WordPress site is made with genesis and I thought that may be causing the problem... I also replaced $ with jQuery to stop conflict problems.

Pen: http://codepen.io/naniio/pen/QwVXWG

jQuery:

jQuery(document).ready(function($) {
   jQuery(".clickable").click(function() {
       var toHide = $(this).attr('data-hide');
       jQuery(".map").toggle();
       jQuery("#" + toHide).toggle();
   });

   jQuery(".hide").click(function() {
       jQuery(".map").toggle();
       jQuery(this).toggle();
   });

});

Site www.shakesafe.co.nz

I added the code (HTML + JS) the home page with simple hooks and then added the CSS with a custom body tag for the home page in gensis samples stylesheet.. but the Jquery doesn't work? do you guys have any ideas as to why?

Thanks for your time and effort as always!

Answer 1

Always check your browser console for errors thrown. In this case, I see a Uncaught TypeError: undefined is not a function message. That error is found on line 112 on your page, and if you check it carefully, you are using the $ without assigning the jQuery object to it, hence causing an error:

jQuery(document).ready(function() {
     jQuery(".clickable").click(function() {
       var toHide = $(this).attr('data-hide');  // Line 112 where error is from
         jQuery(".map").toggle();
         jQuery("#"+toHide).toggle();
    });

     jQuery(".hide").click(function() {
       jQuery(".map").toggle();
       jQuery(this).toggle();
    });
});

Replace the $ with jQuery, i.e. var toHide = jQuery(this).attr('data-hide');.

Alternatively, you can tell jQuery that you are using $ to stand in for the jQuery object, saving you 5 characters every single instance you call for it:

jQuery(document).ready(function($) {
     $(".clickable").click(function() {
       var toHide = $(this).attr('data-hide');
         $(".map").toggle();
         $("#"+toHide).toggle();
    });

     $(".hide").click(function() {
       $(".map").toggle();
       $(this).toggle();
    });
});