Why isn't jQuery functioning on mobile but works on PC?

[nagrebeckiy]

It works properly on my PC. 

And how it looks on mobile iPhone/Android.

Theme version Dawn 5.0.0

How jQuery file included :

My js code in custom section:

<script type="application/javascript" async>
const
$container = $(document).find(".loop-container"),
$texts = $container.find(".js-text-slider"),
$images = $container.find(".js-image-slider"),
$buttons = $container.find(".js-button-slider"),
$toggles = $container.find(".js-toggle-item");
hideAll();
$texts.each(function(i) {
if ( i === {{ section.settings.default_toggle_id }} ) {
$(this).show();
}
});
$buttons.each(function(i) {
if ( i === {{ section.settings.default_toggle_id }} ) {
$(this).show();
}
});
$images.each(function(i) {
if ( i === {{ section.settings.default_toggle_id }} ) {
$(this).removeClass("hidden");
}
});
$toggles.each(function(i) {
if ( i === {{ section.settings.default_toggle_id }} ) {
$(this).addClass("active");
}
});
function toggleSliderClick(toggle) {
let index = toggle.attr("loop-index") - 1;
resetActiveToggles();
toggle.addClass("active");
hideAll();
$texts.eq(index).show();
$buttons.eq(index).show();
$images.eq(index).removeClass("hidden");
}
function resetActiveToggles() {
$toggles.removeClass("active");
}
function hideAll() {
$texts.hide();
$buttons.hide();
$images.addClass("hidden");
}
$toggles.each(function () {
$(this).unbind("click").on("click", function (event) {
event.preventDefault();
toggleSliderClick($(this));
});
});
</script>

[PageFly-Oliver]

Hi @nagrebeckiy ,

I think you can use

<script>
 $(document).ready(function(){
 if (jQuery) { 
    const
$container = $(document).find(".loop-container"),
$texts = $container.find(".js-text-slider"),
$images = $container.find(".js-image-slider"),
$buttons = $container.find(".js-button-slider"),
$toggles = $container.find(".js-toggle-item");
hideAll();
$texts.each(function(i) {
if ( i === {{ section.settings.default_toggle_id }} ) {
$(this).show();
}
});
$buttons.each(function(i) {
if ( i === {{ section.settings.default_toggle_id }} ) {
$(this).show();
}
});
$images.each(function(i) {
if ( i === {{ section.settings.default_toggle_id }} ) {
$(this).removeClass("hidden");
}
});
$toggles.each(function(i) {
if ( i === {{ section.settings.default_toggle_id }} ) {
$(this).addClass("active");
}
});
function toggleSliderClick(toggle) {
let index = toggle.attr("loop-index") - 1;
resetActiveToggles();
toggle.addClass("active");
hideAll();
$texts.eq(index).show();
$buttons.eq(index).show();
$images.eq(index).removeClass("hidden");
}
function resetActiveToggles() {
$toggles.removeClass("active");
}
function hideAll() {
$texts.hide();
$buttons.hide();
$images.addClass("hidden");
}
$toggles.each(function () {
$(this).unbind("click").on("click", function (event) {
event.preventDefault();
toggleSliderClick($(this));
});
});
}
}
</script>

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

[nagrebeckiy · Accepted solution]

Well, thanks everyone for help. I`ve found the solution by myself. Added full CDN path from 3.7.1 jQuery version. Didn't change anything in it and it works 😃