Webflow tabs requires two clicks to activate JS

Design help General
1

I’m running into a slight mobile issue here.

I’m using webflow’s built-in tabs and there all working no issues whatsoever.

However, on mobile, I need to be able to scroll down to the content of the tab, I have some custom code working, but it’s requiring two clicks.

Everything is triggering on mobile and desktop I just need to try to get rid of it being two clicks if at all possible.

The custom code I have currently is

<script>
var mq = window.matchMedia( "(max-width: 768px)" );

if (mq.matches) {
  $('.w-tab-menu a').click(function() {
    if($(this).hasClass('w--current')) {
      $('html, body').animate({scrollTop: $(".services-options .tabs-content").offset().top - 20}, 800);
    };
  });
};
</script>

My share link is below, the tabs here are on the services page.

Here is my site Read-Only: [https://preview.webflow.com/preview/edetvous?utm_source=edetvous&preview=61d63d54b1a4133b0980d966ee38848a&mode=preview][1]

Test site: Nos Services - Ed & Vous

2

Ever find a solution?

3

I have the same issue…