アコーディオンを開いたタイミングでslickを実行したい

Question

以前質問して解決したこちらの質問のサイトを
リニューアルすることになり、以前とほぼ同様の機能を実装しようとしたのですが、
以前とは微妙に違うエラーが発生してアコーディオン内のslickが実行されない問題が発生してしまいました。

結論から言うとアコーディオンを開いたタイミングでslickが初期化されていないため、
存在しないslickオブジェクトに対してslickSetOptionメソッドを実行しようとするためにエラーとなっている状況と思われます。

なのでアコーディオンを開いたタイミングでslickを初期化する処理を加えれば良いのではないかと思うのですが、
実行したいものが単純なslickスライダーではないため、どうするのが良いのか分かりません。

前提・実現したいこと

・カルーセル表示にはslick.jsを使用している(ver. 1.3.15)
・SPレイアウト（640px以下）ではアコーディオンパネルの中でカレンダーをカルーセル表示で見せる
・PCではアコーディオンなし／カルーセル表示なし
・ブラウザをリサイズしても上記表示を正常に切り替える
・カレンダー表示はアコーディオンの中で見せる場合と、そうでない場合の両方のパターンがある
・アコーディオンではない状態のカレンダー表示は、既存のinitCalendar()関数で正しく表示できている

発生している問題・エラーメッセージ

SPレイアウト時にアコーディオンを開くと、エラーが出てslick.jsの初期化が正しく行われない

該当のソースコード

<div class="js-accordion">
    <h3 class="jy-routeCaption js-acrTitle">アコーディオン開閉見出し<span class="js-acrLabel">開く</span></h3>
    <div class="js-acrBody">
        <div class="jy-calendar" data-month="12,1">
            <div class="cal">
                <table>省略 12月カレンダー</table>
            </div><!-- /.cal -->
            <div class="cal">
                <table>省略 1月カレンダー</table>
            </div><!-- /.cal -->
        </div><!-- /jy-calendar -->
    </div><!-- /.js-acrBody -->
</div><!-- /.js-accordion -->

//ready
$(function(){
    initCalendar(); //カレンダー初期化（※slick初期化含む）
});

//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 = 640;

    $cal.each(function(){
      var len = $(this).find(".cal").length;
			
      //アイテムが2つ以上だったら
      if(len > 1){
        var calMonthText = $(this).data("month"); //掲載月データを取得
        var calArray = String(calMonthText).split(","); //掲載月データを配列に変換
        var num = $.inArray(month, calArray); //当月が何番目にあるかを取得
        if(num < 0){
          num = 0; //当月が無かったら最初の月
	}
        //640px以下だったら（SPレイアウト時）
        if (w <= size) {
          if(!$(this).hasClass('slick-initialized')) {
            $(this).slick({ //slickの初期化
              initialSlide: num,
              variableWidth: true,
              centerMode: true
            });
            $(this).find(".cal").matchHeight({
              remove: true
            });
           }
　　　　//641px以上だったら（PCレイアウト時）
        } else {
          if($(this).hasClass('slick-initialized')) {
            $(this).unslick(); //slickの解除					 
            $(this).find(".cal").matchHeight();	
          }
        }
     //アイテムが1つだったら
     }else{
       $(this).find(".cal").addClass("center");
       return false;
     }	
   });	   
}

/* アコーディオン開閉処理
-------------------------------------------------- */
function accordionPanel01() {
  $(".js-acrTitle").on("click", function(){
    var w = $(window).width();
    var size = 640;
    
    //640px以下だったら
    if(w <= size){
      var $eventTarget = $(this); //.js-acrTitle
      
      //アコーディオン開いている時の処理
      if($(this).hasClass("op")){
        $(this).removeClass("op");
        $(this).find(".js-acrLabel").text("開く");
        $(this).next().stop().slideUp(400, function () {
          //
        });
      //アコーディオン閉じている時の処理
      }else{
        $(this).addClass("op");
        $(this).find(".js-acrLabel").text("閉じる");
        $(this).next().stop().slideDown(400, function () {
           //アコーディオンの中にカレンダーがあったら
           if($eventTarget.next().has(".jy-calendar")){
            $eventTarget.next().find(".jy-calendar").slickSetOption(null, null, true);//slickの表示をリフレッシュ★エラーの原因箇所
            }
           }
        });
      }
    }else{
      return false;
    }
  });
}

/* リサイズされた場合のアコーディオン表示処理
-------------------------------------------------- */
function resetAccordionPane01() {
    var w = $(window).width();
    var size = 640;

    $(".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"); 
        }        
    });
}

試したこと

↓こちらはエラーこそ出ませんが、initCalendar()が実行されませんでした。

//アコーディオンの中にカレンダーがあったら
if($eventTarget.next().has(".jy-calendar")){
  initCalendar(); //slickのリフレッシュの代わりにカレンダー表示の関数を入れてみる
}

↓こちらはアコーディオンを開いた時にslickが実行されますが、
initCalendar()でやっている諸々の仕様（該当月を初期スライドにする、PCレイアウト時にはslickを解除するなど）の適用ができていないのでこれだけでは駄目です。

//アコーディオンの中にカレンダーがあったら
if($eventTarget.next().has(".jy-calendar")){
  $(".jy-calendar").slick(); //ダイレクトにslickを実行してみる
}

アドバイスいただきたいこと

・ すでに存在するinitCalendar()の関数を、アコーディオンを開くタイミングで実行する方法はありますか？
・ アコーディオンの中でカレンダーを表示する場合は既存のinitCalendar()とは別の処理（関数？）を用意しなければならないのでしょうか？
・何か他にエラーを起こすような問題が存在しているでしょうか？

解決の糸口が見つからない状態なので、何かアドバイスをいただけますと助かります。
よろしくお願い申し上げます。

Comments

[m.ts10806]

.find(".jy-calendar")[0] のようにしてもだめですか？

[aKusano]

エラーの内容が変わりました。
TypeError: $eventTarget.next().find(".jy-calendar")[0].slickSetOption is not a function.

[s8_chu]

質問者さんの実現したいことがあまり理解できなかったので、とりあえず出てきたエラーを解消してみましたが、この状態では質問者さんの実現したいことは行えていますか？
https://codepen.io/anon/pen/xMrgXE

また、 slick のバージョンを教えていただけませんか？

[aKusano]

ありがとうございます。
slickのバージョンはちょっと古くて1.3.15になります。
codepen確認させていただきましたが、近いですがちょっと違います。
SPレイアウトになった時、アコーディオンは閉じた状態からスタートしたいです。

[m.ts10806]

バージョン情報は再現確認には最も必要なものなので質問本文に追記してください

[退会済みユーザー]

initCalendar 内のthisは本当にイベント対象のthisなのかだな。

[aKusano]

バージョン情報を本文内に追記いたしました。ご指摘ありがとうございます。

Answer 1

こちらはアコーディオンを開いた時にslickが実行されますが、

initCalendar()でやっている諸々の仕様（該当月を初期スライドにする、PCレイアウト時にはslickを解除するなど）の適用ができていないのでこれだけでは駄目です。

「諸々の仕様」が提示されているものだけなのであれば、numが算出済みだったらよいのでは？
ウィンドウサイズに関係なく、.jy-calendarのdata属性に算出したnumを保存するようにして、「ダイレクトにslickを実行してみる」の箇所で使えばよいのでは。

Comments

[aKusano]

なるほど。ちょっとやってみます！

[aKusano]

当月判定だけでなく、カレンダーの数が1つか2つ以上かで表示を変える必要もあり、numだけどうこうしたのではやはり難しそうだったので、とりあえず「ダイレクトにslickを実行してみる」のところにinitCalendar()の中身のコード（※対象となる要素のセレクタだけは変更）をぶちこんでみたところ、SP表示の時のカレンダー表示はうまくいきました。が、今度はPCレイアウトに変更したときにslickを解除するのがうまく行かず。。。
なかなか一筋縄ではいかないようです…。

[kei344]

initCalendar()で$(this).unslick();してますか？
initCalendar()で$(this).slick();してませんよね。

[aKusano]

initCalendar()の方では$(this).unslick();してます。アコーディオンに入ってないカレンダーの方はうまく表示切り替えできてます。
同じコードをそのままアコーディオンのスクリプトの中に入れた場合、$(this).unslick();しているところが効かないみたいです。

…あ、アコーディオンの方はそもそも「640px以下」の時にしか実行されないif文の中にあるので、641px以上の時のunslick()が動くわけないですね…。

[aKusano]

今のままのinitCalendar()では、やはりアコーディオンの中でそのまま流用することはできなさそうということが見えてきました。。。アコーディオンの中でも動くようにするには根本的にロジック組み替えるか、アコーディオンの中用の動作コードを別途作らないと駄目ですかね…。

[aKusano]

initCalendar()の組み換えはちょっと大変そうなのでアコーディオンの中にベタにカレンダーの処理を埋め込んでしまってひとまず動かすことにしました…。もっとうまいやり方が絶対あるような気がしますがたとえクソコードでも動かすのが先決なので…（汗）

コメントのやりとりの中でひとまず動作につながるヒントに気づけたのでベストアンサーとさせていただきます。いつもありがとうございます。

[aKusano]

すみません、その後改めてコードを確認したところ、initCalender()の中に原因があることが判明しました。

//アイテムが1つだったら
}else{
$(this).find(".cal").addClass("center");
return false; ←★これ
}

不要なreturn falseが入っていたため途中で処理が終了し、slickの初期化が正しく行われなかったというのが真相だった模様です。。。