アコーディオンの中のslick.jsが正常に初期化されない

Question

###前提・実現したいこと
・カルーセル表示にはslick.jsを使用している
・SPレイアウト（639px以下）ではアコーディオンパネルの中でカレンダーをカルーセル表示で見せる
・PCではアコーディオンなし／カルーセル表示なし
・ブラウザをリサイズしても上記表示を正常に切り替える

###発生している問題・エラーメッセージ
・ブラウザをリサイズした後アコーディオンを開くと、エラーが出てslick.jsの初期化が正しく行われない

###該当のソースコード

<div class="js-accordion">
	<div class="js-acrTitle">アコーディオン開閉ボタン</div>
	<div class="item js-acrBody">
		<div class="jy-calendar" data-month="9">
			<div class="cal">
				<table>省略</table>
			</div><!-- /.cal -->
		</div><!-- /jy-calendar -->
	</div><!-- /.js-acrBody -->
</div><!-- /.js-accordion -->

//load
$(window).on('load', function(){
	accordionPanel01(); //アコーディオン開閉（※slick初期化含む）
});

//resize
var timer = false;
$(window).resize(function() {
	if (timer !== false) {
		clearTimeout(timer);
	}
	timer = setTimeout(function() {
		resetAccordionPane01(); //アコーディオン表示リセット
		initCalendar(); //カレンダー初期化（※slick初期化含む）
	}, 200);
});

/* カレンダー初期化処理
-------------------------------------------------- */
function initCalendar(){
	var $cal = $(".jy-calendar");
	var d = new Date(); //日時情報を取得
	var month = String(d.getMonth()+1); //当月を取得して文字列に変換
	var w = $(window).width();
	var size = 639;
	
	$cal.each(function(){
		var calMonthText = $(this).data("month"); //掲載月データを取得
		var calArray = String(calMonthText).split(","); //掲載月データを配列に変換
		var num = $.inArray(month, calArray); //当月が何番目にあるかを取得
		if(num < 0){
			num = 0; //当月が無かったら最初の月
		}
		if (w <= size) {
			$(this).slick({ //slick初期化
				initialSlide: num //当月をスライドの1番目に設定
			});			
		} else {
			$(this).unslick(); //slickを解除	
		}		
	});	
}

/* アコーディオン開閉処理
-------------------------------------------------- */
function accordionPanel01() {
	$(".js-acrTitle").each(function(){
		$(this).click(function(){

		var $eventTarget = $(this);
		
		if($(this).hasClass("op")){ //既にアコーディオンが開いている時の処理
			$(this).removeClass("op");
			$(this).next().stop().slideUp(400, function () {
				return;
			});
		}else{ //アコーディオンが閉じている時の処理
			$(this).addClass("op");
			 if($eventTarget.next().has(".jy-calendar")){ //アコーディオンの中にカレンダーがあったら
				$eventTarget.next().find(".jy-calendar").slickSetOption(null, null, true); //slickの表示をリフレッシュ★ここでエラーが出る
				}
     	 	});
		}
			
		});
	});
}

/* リサイズされた場合のアコーディオン表示処理
-------------------------------------------------- */
function resetAccordionPane01() {
	var w = $(window).width();
	var size = 639;
	
	$(".js-accordion").each(function(){
		if (w <= size) { //SPの時
			var display = $(this).find(".js-acrBody").css("display");
			if(display == "block"){//アコーディオンが開いていたら
				$(this).find(".js-acrTitle").addClass("op"); //開閉アイコンの状態を設定
			}
		} else { //PCの時
			//強制的にパネルを開く
			$(this).find(".js-acrBody").show(); 
			$(this).find(".js-acrTitle").removeClass("op"); 
		}		
	});
}	

###試したこと
最初はどういう状態だとうまく表示されないのか分からなかったので、エラーが再現されるタイミングを特定するためにコンソールの状態を確かめながらいろいろ試しました。

・初期表示の状態で開閉 →問題なし
・アコーディオンを開いた状態でリサイズ後、開閉 →問題なし
・アコーディオンを閉じた状態でリサイズ後、開閉 →エラーでslickが正しく表示されない
・おかしくなった状態で再読み込みした後、開閉 →問題なし

というところまでは突き止めました。
リサイズ後、アコーディオンを開こうとすると、

Uncaught TypeError: Cannot read property 'removeClass' of null

というエラーが出て、slickのリフレッシュをしている箇所のコードがコケるようです。

if($eventTarget.next().has(".jy-calendar")){...}のif文を取ってみても変わりません。

カレンダー入りのアコーディオンはページ内に複数ありますが、1つにしてみても変化なしです。

ここからどうやってバグの原因を突き止めたら良いのか分からず、完全に行き詰まってしまいました。。。
どこかロジックがおかしいところや、エラーの原因になりそうなところが無いか、どなたかお助けいただけますと助かります。。。m(_ _)m

###補足情報
MacのChromeとFirefoxでは確認していますがどちらも同じです。
その他不足情報等ありましたらご連絡ください。

Answer 1

initCalendar() で $(this).slick(); / $(this).unslick(); をしていますが、そのたびに同じ要素に .slick() を実行していることになるのでは。

load時に1回 .slick() して、それを変数に保存し、hoge.slick('setPosition'); とすればリロードできませんか？

【slick.jsを利用していて、初期状態をdisplay:none;にしたらレイアウト崩れる | SSSSSN】
http://sssssn.com/archives/288

関連するライブラリや全て提示してもらって、動作が再現できればもう少し回答の精度が上げれると思います。

Comments

[aKusano]

ご回答と参考サイトの情報ありがとうございました。

まさしくビンゴ！でした。
ずっと「accordionPanel01()」と「resetAccordionPane01() 」ばかり見てあーでもないこーでもないとやっていて、initCalender()の方はノーマークだったので、目からウロコでした！！！

slick(), unslick()の処理を「.slick-initialized」の有無で分岐するようにしたら正常に表示されるようになりました。

重要なヒントをいただき、ありがとうございました。