CODEWITHSUNDEEP
javascriptjquerywordpressmobile
terrabyte
terrabyte

Reputation: 31

Function works on desktop and emulator but not on mobile browsers

I have a WordPress Woocomerce site. I have a read more / read less function that expands/hides long product descriptions. It works fine on desktop. It even works using Chrome's mobile emulator tool.

However it does not on any mobile browsers. Pressing the button simply jumps the page up a bit. I'm assuming the browsers aren't reading the .on('click 'touchstart').:

$(document).ready(function() {

      $(".product-readmore").on('click touchstart', function() {

          var description = document.querySelector(".product-description-readmore");

          if (description.style.height === '') {
            description.style.height = 'auto';
          } else if (description.style.height === 'auto') {
            description.style.height = '';
          } else {
            description.style.height = '92px';
          }

          $(this).text($(this).text() == 'Read less...' ? 'Read more...' : 'Read 
            less...');
          });
      });

Upvotes: 0

Views: 101

Answers (1)

terrabyte
terrabyte

Reputation: 31

It turns out the issue is with how WordPress handles jQuery. I changed the first line to jQuery(document).ready(function($){

And it works fine in all browsers, mobile and otherwise, now.

Upvotes: 1

Related Questions