skip to Main Content

I am trying to integrate Jquery code in wordpress divi theme in the following section as shown in the screenshot below but it doesn’t seems to work and I am getting the following error:

Uncaught TypeError: $ is not a function

enter image description here

The JQuery code which I have included in the screenshot is mentioned in this fiddle.

The snippets of the JQuery code used in the fiddle are:

$("#franchisehub").click(function() {
  if ($('.franchisehubtv').css('display') == "flex") {
    $('.franchisehubtv').css('display', 'none');

  } else {
    $('.franchisehubtv').css('display', 'flex'); 
    $('.cloudbasedtextipad').css('display', 'none');
    $('.business-analytics').css('display', 'none');
    $('.tech-support').css('display', 'none');
    $('.order-management').css('display', 'none');
    $('.employee-management').css('display', 'none');
    $('.white-label').css('display', 'none');
    $('.brand-control').css('display', 'none');
    $('.lead-tracking').css('display', 'none');
    $('.custom-invoicing').css('display', 'none');
    $('.goal-setting').css('display', 'none');
    $('.customization-tools').css('display', 'none');
    $('.royalty-calculator').css('display', 'none');
    $('.email-marketing').css('display', 'none');
  }

});

2

Answers


  1. Use jQuery instead of $.
    WordPress is running jQuery in compatibility mode.

    Login or Signup to reply.
  2. WordPress themes usually use jQuery.noConflict() which removes window.$ alias for jQuery

    Just wrap your code in

    // IIFE to enable `$` as jQuery
    ;(function($){
       // document ready
       $(function(){
          // your code
       });
    })(jQuery);
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search