Как запустить/отменить скрипт при разных разрешениях?

Question

[ТемноКот]

Имеется банальная адаптивная таблица на чистом CSS, которая при разрешении < 640px мутирует в блоки, плюс, JS-скрипт (и немного CSS), который превращает эту таблицу в "аккордеон" - то есть, все ячейки, кроме первой сворачиваются и раскрываются по клику

var $restable = $('.restable');

		$restable.find("tbody tr td:first-child").addClass("expand_block");
		$restable.find("td").hide();
    $restable.find("td.expand_block").show();
    $restable.find(".expand_block").click(function(){
				$(this).toggleClass("expand_active");
				$(this).siblings().fadeToggle(150);
			}).eq(0).trigger('click');

Пример на кодепен https://codepen.io/akira13w/pen/RwyZEVo

Но дело в том, что при ресайзе скрипт глючит.
То есть, созданные в мобильном варианте style="display: block;" у каждого элемента остаются и на большом экране, а потому приходится страницу обновлять. Можно это как-то исправить?

Comments

[Noder SS]

Имеете ввиду делать function на определенном разрешении?

[ТемноКот]

Да. То есть нет. То есть... ну вот если добавить

$(window).on('resize load', (function() {
		if ($(window).width() =< 640) {

То скрипт сработает при уменьшении окна. Однако при ВОЗВРАТЕ на большое разрешение вся вёрстка поедет, потому как добавленные при ресайзе style="display: block;" так и останутся. И чтобы их убрать надо перезагружать страницу.

Answer 1

[ТемноКот]

Проблему решил. Просто добавил в условия удаление стилей. То есть...

if ($(window).width() < 640) { 
       /*тут код из вопроса */
      } 
    else  {
        $restable.find("td").css("display", "");
	}