How to fix slick slider blocking .show .hide jQuery on mobile devices?

Question

I'm using a slick slider on four items. Each item contains two layers that can be toggled on/off 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.

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; } 

@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', }, 


$.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>