【HTML/JavaScript】画面サイズによってJavaScriptの処理を制御してレスポンシブな処理を実現したい

Question

【実現したいこと】
AirbnbのWebサイトの模写を行っています。
あるリンクをクリックしたときの動作として、以下2通りの動作を実現したいと考えています。

①ウィンドウサイズ747px以下のとき：　リンクをクリックすると、説明文がスライドアップして表示される。
②ウィンドウサイズ747pxより大きいとき：　リンクをクリックすると、説明文がモーダルウィンドウで表示される。

【現状とエラー内容】
スライドアップはjQuery使用、モーダルウィンドウはBootstrap使用すれば可能と考え、実装しました。しかし、上記①の場合に、スライドアップが動作せず、どの場合もモーダルウィンドウが動作してしまいます。
画面サイズによって、JavaScriptの処理が分岐できるようにしたいです。（モーダルウィンドウが動作する場合と、スライドアップが動作する場合）
そもそも、レスポンシブ対応のためには別の書き方にすべき場合は、その点もご教示いただけますと幸いです。

【考えられる原因】
デバッグで原因究明中です。
Javascriptで、ウィンドウサイズが変わったときの動作を記述しており、
その箇所が上手く動作していないのではと今のところは推測しています。

【画面側】

<div class="slide-open-button">
　　<!-- クリックするリンク start -->
    <div class="s-o-b">Airbnbホストになれるのはどんな人？</div>
　　<!-- クリックするリンク end -->
　　<!-- slideinする説明文 start -->
    <div class="slidein">
        <div class="close-button"><i class="fas fa-times"></i></div>
        <h2 class="text-b">Airbnbホストになれるのはどんな人？</h2>
        <p class="text-a">一部の地域を除き、Airbnbでホスティングを始めるのはとても簡単です。リスティングの作成および掲載もすべて無料。 マンションやアパート、一軒家のまるまる貸切から個室、ツリーハウス、お城などはAirbnbで掲載している宿泊先タイプのほんの一例でしかありません。</p>
        <p class="text-a">ホストに求められる詳しい条件は、安全、セキュリティ、信頼性に関するAirbnbコミュニティの基準、高評価レビュー獲得のポイントをまとめたホスピタリティの基準をチェックしてみましょう。</p>
    </div>
　　<!-- slideinする説明文 end -->

    <!-- モーダルウィンドウ start-->
    <div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="label1" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Modal body
                </div>
            </div>
        </div>
    </div>
    <!-- モーダルウィンドウ end-->

$(window).on('load resize', function() {
    var winW = $(window).width();
    var devW = 747;
    
    if (winW <=  devW) {
        // 画面サイズがタブレットサイズ以下の時
        $(document).on('click', '.s-o-b', function(){
            $(this).next('div').slideDown();
        });
        
        $(document).on('click', '.close-button', function(){
            $(this).parent('.slidein').slideUp();
        });
    } else {
        // 画面サイズがタブレットサイズより大きい時
        // s-o-bクラス（クリックするリンク）に、「data-toggle="modal" data-target="#modal1"」の属性を追加し、
　　　　// クリックするとモーダルウィンドウが動作するようにする
        $('.s-o-b').attr({
            'data-toggle' : 'modal', 
            'data-target' : '#modal1'
        });
    }
});

【画面イメージ】

模写対象サイト：
https://www.airbnb.jp/host/homes?_set_bev_on_new_domain=1579409586_NDhhOTlmMzQ2MWU5

【バージョン】
jQuery 3.5.0

不足情報等ございましたらお手数をおかけしますが、ご教示いただけますと幸いです。
何卒宜しくお願い致します。

Answer 1

以下のようにすることで質問者さんの実現したい動作が行えると思います (動作確認用リンク)。

<div class="slide-open-button">
  <!-- クリックするリンク start -->
  <div class="s-o-b">Airbnbホストになれるのはどんな人？</div>
  <!-- クリックするリンク end -->
  <!-- slideinする説明文 start -->
  <div class="slidein">
    <div class="close-button"><i class="fas fa-times"></i></div>
    <h2 class="text-b">Airbnbホストになれるのはどんな人？</h2>
    <p class="text-a">一部の地域を除き、Airbnbでホスティングを始めるのはとても簡単です。リスティングの作成および掲載もすべて無料。 マンションやアパート、一軒家のまるまる貸切から個室、ツリーハウス、お城などはAirbnbで掲載している宿泊先タイプのほんの一例でしかありません。</p>
    <p class="text-a">ホストに求められる詳しい条件は、安全、セキュリティ、信頼性に関するAirbnbコミュニティの基準、高評価レビュー獲得のポイントをまとめたホスピタリティの基準をチェックしてみましょう。</p>
  </div>

  <!-- slideinする説明文 end -->

  <!-- モーダルウィンドウ start-->
  <div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="label1" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          Modal body
        </div>
      </div>
    </div>
  </div>
  <!-- モーダルウィンドウ end-->
</div>

$(window).on('load', function() {
  $(".s-o-b").on("click", function() {
    var winW = $(window).width();
    var devW = 747;

    if (winW <= devW) {
      // 画面サイズがタブレットサイズ以下の時
      $(this).next('div').slideDown();
    } else {
      // 画面サイズがタブレットサイズより大きい時
      // クリックするとモーダルウィンドウが動作するようにする
      $('#modal1').modal('toggle');
    }
  });
  $(".close-button").on("click", function() {
    $(this).parent('.slidein').slideUp();
  });
});

Comments

[otdsh9432]

ご回答いただきありがとうございます！
記載いただいた方法で試したところ、実現したい処理が正常動作することを確認できました！！
ありがとうございました。