0

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...');
          });
      });
double-beep
  • 5,031
  • 17
  • 33
  • 41
terrabyte
  • 31
  • 4
  • [This](https://stackoverflow.com/questions/11397028/document-click-function-for-touch-device) question may help you. the thing is that `touchstart` is like using "onMouseDown", you probably need something like "touch" – DIEGO CARRASCAL Jul 12 '19 at 18:58
  • @DIEGOCARRASCAL thank you for the suggestion. "Touch" did not work. I read through the thread you provided and nothing in it works either. – terrabyte Jul 12 '19 at 19:23
  • How are you testing? What browsers? Can you make a stand alone example so we can help you further? – Twisty Jul 12 '19 at 20:41
  • 1
    @Twisty I'm testing with appetize.io emulating an iphone 7 with safari. Also testing on my google Pixel 2 xl using chrome. The script works in the desktop version of chrome, but not the mobile version. I created a jsFiddle https://jsfiddle.net/y9d03eL6/2/ and it works in mobile. This leads me to believe the code is fine, and something in WordPress is causing an issue. – terrabyte Jul 12 '19 at 21:04

1 Answers1

1

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.

terrabyte
  • 31
  • 4