Slick slider blocks show hide jQuery on mobile

[StudioSon]

short description of the bug / issue, provide more detail below.

Could anyone help me on the following issue:

I'm using a slick slider on four items. Each item contains two layers that can be toggled by a user's (mouse)click (using jQuery with .show .hide.) I use breakpoints to change the slickslider to show less items on mobile.

On desktop it runs smoothly. However, on mobile the items cannot be toggled on/off as if the jQuery .show .hide is blocked.

After resizing the screen to a smaller format and back to its original format, the toggling ON/OFF of the layers using the show hide jQuery is also lost on desktop.

Any idea how to fix this? I really appreciate your support.

Should there be anything unclear (sorry, I am an absolute nembie), please do not hesitate to contact me

====================================================================

[ paste your jsfiddle link here ]

use this jsfiddle to reproduce your bug:
http://jsfiddle.net/simeydotme/fmo50w7n/
we will likely close your issue without it.

====================================================================

Steps to reproduce the problem

1. ...
2. ...

SLICK SLIDER

<style> .slick-slider { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: rgba(255,255,255,1); } .slick-center { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); transform: scale(1.25); margin-left: 0vw !important; margin-right: 0vw !important; } .slick-list { position: relative; display: block; overflow-x: hidden; padding: 5vw 1vw 5vw 1vw !important; margin-left: 0!important, } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-slide { position: relative; float: left; height: 100%; min-height: 1px; } .home-content-slider .slick-arrow, .home-content-slider .slick-arrow:hover, .home-content-slider .slick-arrow:focus { position: absolute; font-size: 0; line-height: 0; padding: 0; color: #F43B69; outline: none; background: rgba(255,255,255,1); border: none; cursor: pointer; top: 50%; transform: translateY(-50%); z-index: 100; height: 50px; vertical-align: middle; border-radius: 50%; width: 50px; } .home-content-slider .slick-prev { left: -50px; } .home-content-slider .slick-next { right: -50px; } .home-content-slider .slick-arrow:before { font-family: ETmodules; color: transparant; background: #F43B69; opacity: 1; font-size: 46px; vertical-align: middle; color: #1F293E; text-align: center; } .home-content-slider .slick-arrow:hover:before { opacity: 0.8; } .home-content-slider .slick-prev:before { content: '34'; } .home-content-slider .slick-next:before { content: '35'; } .entry-content ul.slick-dots { position: absolute; bottom: 0; display: block; width: 70%; padding: 0; margin: 0; list-style: none; text-align: center; } .slick-dots li { position: relative; display: inline-block; margin: 0 0.6vw; padding: 0; cursor: pointer; } .slick-dots li button { font-size: 0; line-height: 0; display: block; width: 1.4vh; height: 1.4vh; padding: 0; cursor: pointer; color: #000000; border: 2px; outline: none; background-color: #4F989E; border-radius: 10px; align: center } .slick-dots { bottom: 0vw !important; margin-left: -3vw!important; } .slick-dots li button:hover { background-color: #F43B69; width: 1.6vh; height: 1.6vh; } .slick-dots li.slick-active button { background-color: #ffffff; } .slick-dots li button:before { display: none!important; } @media(max-width: 980px) { .home-content-slider .slick-prev { left: -32px; } .home-content-slider .slick-next { right: -30px; } } @media(max-width: 499px) { .home-content-slider .slick-prev { left: -26px; } .home-content-slider .slick-next { right: -24px; } } </style> <script> jQuery(document).ready(function() { jQuery('.slide-home').slick({ speed: 800, autoplay: true, fade: false, autoplaySpeed: 10000, initialSlide: 2, dots: true, arrows: false, pauseOnHover: true, focusOnSelect: false, swipe: true, swipeToSlide: true, centerMode: true, slidesPerRow: 1, rows: 3, slidesToShow: 3, slidesToScroll: 1, touchMove: true, touchThreshold: 5, responsive: [ { breakpoint: 980, settings: { slidesToShow: 2, } }, { breakpoint: 767, settings: { slidesToShow: 1, } } ] }); }); </script>

SHOW HIDE LAYERS

<script> jQuery(function($){ var buttons = { '.mtc_button_1up': { 'toggle': '', 'hide' : '.mtc_element_1up', 'show' : '.mtc_element_1down,.mtc_element_2up,.mtc_element_3up,.mtc_element_4up', }, '.mtc_button_1down': { 'toggle': '', 'hide' : '.mtc_element_1down', 'show' : '.mtc_element_1up', }, '.mtc_button_2up': { 'toggle': '', 'hide' : '.mtc_element_2up', 'show' : '.mtc_element_2down,.mtc_element_1up,.mtc_element_3up,.mtc_element_4up', }, '.mtc_button_2down': { 'toggle': '', 'hide' : '.mtc_element_2down', 'show' : '.mtc_element_2up', }, '.mtc_button_3up': { 'toggle': '', 'hide' : '.mtc_element_3up', 'show' : '.mtc_element_3down,.mtc_element_1up,.mtc_element_2up,.mtc_element_4up', }, '.mtc_button_3down': { 'toggle': '', 'hide' : '.mtc_element_3down', 'show' : '.mtc_element_3up', }, '.mtc_button_4up': { 'toggle': '', 'hide' : '.mtc_element_4up', 'show' : '.mtc_element_4down,.mtc_element_1up,.mtc_element_2up,.mtc_element_3up', }, '.mtc_button_4down': { 'toggle': '', 'hide' : '.mtc_element_4down', 'show' : '.mtc_element_4up', }, }; $.each(buttons, function(button, elements) { $(button).click(function(e){ e.preventDefault(); $(elements.toggle).slideToggle(0); $(elements.show).slideDown(0); $(elements.hide).slideUp(0); $(button).toggleClass( 'mtc_button_opened mtc_button_closed'); }); }); }); jQuery(function($){ $('.mtc_button_1up').click(); }); </script>

====================================================================

What is the expected behaviour?

Carousel of four itmes. The appearence of the items can be changed by clicking on a button (using jQuery show hide).

====================================================================

What is observed behaviour?

... The "toggling" of layers ON/OFF works on desktop, but not on mobile. Without the slick slider the items can be toggled "on/off"

====================================================================

More Details

• Which browsers/versions does it happen on?
  Chrome
• Which jQuery/Slick version are you using?
  /1.6.0
• Did this work before?
  Without the slick slider the items can be toggled "on/off" with the show hode jQuery on mobile. with the slick slider the items can be toggled on desktop, but not on mobile