CODEWITHSUNDEEP
javascriptjquerywordpressbootstrap-4
zawx
zawx

Reputation: 11

Having a hard time trying to get jQuery to work with WordPress

I looked at other examples in this forum but nothing worked. The script works just fine in a standalone Bootstrap 4 file, however in WordPress it does not work at all. Using "Understrap" child theme. It's a button that shows in mobile view to close/open a pan. Here is the Codepen

jQuery(document).ready(function($) {
        $('#SearchArea').on('show.bs.collapse', function() {
            $('#closeButton').html('Open');
        });
        $('#SearchArea').on('hide.bs.collapse', function() {
            $('#closeButton').html('Close');
        });

    });

Upvotes: 1

Views: 97

Answers (3)

zawx
zawx

Reputation: 11

Thank you for all your help. Mistake was on my end. Spelling mistake on the ID. Can't believe I spent all this time trying to fix the problem...lol

Upvotes: 0

Joe
Joe

Reputation: 11

WordPress loads jQuery in "no conflict" mode in order to avoid name space collisions with other libraries.

Wrap your script in an anonymous function that maps jQuery to $ like this:

(function($) {
  $('#SearchArea').on('show.bs.collapse', function() {
    $('#closeButton').html('Open');
  });
  $('#SearchArea').on('hide.bs.collapse', function() {
    $('#closeButton').html('Close');
  });
})( jQuery );

https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

Upvotes: 1

Prateek Goyal
Prateek Goyal

Reputation: 64

In Wordpress $ is not used for jquery. Try Below Code I think this work for you.

jQuery(document).ready(function($) {
        jQuery('#SearchArea').on('show.bs.collapse', function() {
            jQuery('#closeButton').html('Open');
        });
        jQuery('#SearchArea').on('hide.bs.collapse', function() {
            jQuery('#closeButton').html('Close');
        });

    });

Upvotes: 0

Related Questions