I am seeking advice for my issue. Here is the code snippet on JSFiddle.
I have a list of models and corresponding values that vary across different categories. I have created a simple table to display this data. However, I need to alter the table structure when the viewport width is less than or equal to 640px to only show one category at a time, making it clickable for value changes.
The problem arises when I resize the screen. If the screen size is 640px or below and I click on a category (thus changing the values) then resize back to a larger screen size, the table should display all values again. Any help with jQuery fixes would be greatly appreciated.
JS:
$('a.cashback-btn').click(function(event) {
if ($(this).hasClass('active')) {
$('.cashback-block .cash-table').slideUp('fast');
$(this).find('i').removeClass("fa-chevron-up");
$(this).find('i').addClass("fa-chevron-down");
$(this).removeClass('active');
} else {
$('.cashback-block .cash-table').slideDown('fast');
$(this).find('i').removeClass("fa-chevron-down");
$(this).find('i').addClass("fa-chevron-up");
$(this).addClass('active');
$('html, body').animate({
scrollTop: $('a.cashback-btn').offset().top
}, 1000);
}
});
var medalsCnt = 1; // 1-3, 4-6, 7-10, >10
var medalsMsg = "1-3 category";
$('.cash-table th.mobile').click(function() {
medalsCnt++;
$('.cashback-block table td:not(:first-child)').hide();
if (medalsCnt == 2) {
medalsMsg = "4-6 category";
$('.cashback-block table td:nth-child(3)').show();
} else if (medalsCnt == 3) {
medalsMsg = "7-10 category";
$('.cashback-block table td:nth-child(4)').show();
} else if (medalsCnt == 4) {
medalsMsg = "more 10 category";
$('.cashback-block table td:nth-child(5)').show();
}
if (medalsCnt > 4) {
medalsCnt = 1;
medalsMsg = "1-3 category";
$('.cashback-block table td:nth-child(2)').show();
}
$(this).find('span').text(medalsMsg);
});
UPDATE
$( window ).resize(function () {
if($('.mobile-version').is(":visible")){
return; //need to show/hide only one column based on category selected
}
else{
$('.cashback-block table td').show(); //works ok, but now mobile version is not working
}
});