スクリプトを簡潔に書きたい

Question

解決したいこと

スクリプト自体は動くのですがここからもっとシンプルに簡潔に書きたいのですがどのように書けばもっと簡素化できるでしょうか？
また簡素化できるポイントを見つけるコツなどはありますでしょうか？

宜しくおねがいします。

<div class="btn_list list01">
<p class="btn">ボタンA</p>
<dl>
<dt>コンテンツ</dt>
<dd>コンテンツテキスト</dd>
</dl>
</div>
<!-- btn_list -->

<div class="btn_list list02">
<p class="btn">ボタンB</p>
<dl>
<dt>コンテンツ</dt>
<dd>コンテンツテキスト</dd>
<dd>コンテンツテキスト</dd>
<dd>コンテンツテキスト</dd>
</dl>
</div>
<!-- btn_list -->

<div id="wrap">
<div class="option_wrap">
<select>
<optgroup label="">
<option value="a">AAA</option>
<option value="b">BBB</option>
<option value="c">CCC</option>
</optgroup>
</select>
</div>

<div class="option_wrap">
<select>
<optgroup label="">
<option value="a">AAA</option>
<option value="b">BBB</option>
<option value="c">CCC</option>
</optgroup>
</select>
</div>

<div class="option_wrap">
<select>
<optgroup label="">
<option value="a">AAA</option>
<option value="b">BBB</option>
<option value="c">CCC</option>
</optgroup>
</select>
</div>
</div>

body{
  padding-top:3vw;
}
.btn{
  padding:15px;
  text-align:center;
  color:#000;
  background: #ccc;
  border:1px solid #000;
  margin:0;
}
.btn_list dl{
  display: none;
  margin:0;
}
#wrap .option_wrap{
    position: absolute;
    width: 100%;
    left:50%;
    margin-left: -50%;
}
#wrap .option_wrap option{
  width: 100%;
}
#wrap .option_wrap:nth-of-type(1){
    top:0;
}
#wrap .option_wrap:nth-of-type(2){
    top:20vw;
}
#wrap .option_wrap:nth-of-type(3){
    top:30vw;
}

<script>

jQuery(function($){
    const w = $(window).width();
    const bh01 = parseInt($(".list01 dl").innerHeight());
    const bh02 = parseInt($(".list02 dl").innerHeight());
    const vw01 = (bh01 / w)*100;
    const vw02 = (bh02 / w)*100;

    const oh01 = parseInt($("#wrap .option_wrap:nth-of-type(2)").css('top'));
    const oh02 = parseInt($("#wrap .option_wrap:nth-of-type(3)").css('top'));

    const ov01 = (oh01 / w)*100;
    const ov02 = (oh02 / w)*100;

    const f01 = vw01 + ov01;
    const f02 = vw01 + ov02;
    const s01 = vw02 + ov01;
    const s02 = vw02 + ov02;

    $('.list01 dl').css('display','none');
    $('.list02 dl').css('display','none');
      $(".list01 p.btn").on("click", function(){
        if ($(this).hasClass('active01')) {
// 開いている状態
                  $('.list02 dl').slideUp();
                  $('.list02 p').removeClass('active02');
                  $(this).removeClass('active01').next().slideToggle();
                  $('#wrap .option_wrap:nth-of-type(2)').animate({'top': ov01 + 'vw'});
                  $('#wrap .option_wrap:nth-of-type(3)').animate({'top': ov02 + 'vw'});
        } else{
// 閉じている状態
                  $('.btn_list.list02 dl').slideUp();
                  $('.list02 p').removeClass('active02');
                  $(this).addClass('active01').next().slideToggle();
                  $('#wrap .option_wrap:nth-of-type(2)').animate({'top': f01 + 'vw'});
                  $('#wrap .option_wrap:nth-of-type(3)').animate({'top': f02 + 'vw'});
        }
      });

      $(".list02 .btn").on("click", function(){
        if ($(this).hasClass('active02')) {
// 開いている状態
                  $('.btn_list.list01 dl').slideUp();
                  $('.list01 p').removeClass('active01');
                  $(this).removeClass('active02').next().slideToggle();
                  $('#wrap .option_wrap:nth-of-type(3)').animate({'top': ov02 + 'vw'});
                  $('#wrap .option_wrap:nth-of-type(2)').animate({'top': ov01 + 'vw'});
        } else{
// 閉じている状態
                   $('.btn_list.list01 dl').slideUp();
                  $('.list01 p').removeClass('active01');
                  $(this).addClass('active02').next().slideToggle();
                  $('#wrap .option_wrap:nth-of-type(3)').animate({'top': s02 + 'vw'});
                  $('#wrap .option_wrap:nth-of-type(2)').animate({'top': s01 + 'vw'});
        }
      });
});
</script>

Comments

[Lhankor_Mhy]

HTMLに $("p.tit_pat01") に該当する要素が見つかりませんでした。
ご提示のHTMLに不足があるのかもしれません。

[x_x]

HTML も上げてください

[Lhankor_Mhy]

「早く処理」とは具体的にはどれぐらいの速さでしょうか。
当方の環境では、それほど気にならない早さで動作しましたが、 kakeru99さんの環境ではかなり待たされる感じですか？

[kakeru99]

Lhankor_Mhyさん
＞＞すみません、言葉に語弊がありました。
処理の速さではなく簡潔に書きたいということです。

[Lhankor_Mhy]

.option_wrap を絶対配置するのは、必須条件ですか？

[kakeru99]

必須条件です。一応レスポンシブでtopの高さが変わらないように計算しています。

[x_x]

絶対配置なんですか？ 提示コードでさえ上にかぶってきていて不安になりますが

[Lhankor_Mhy]

フローで配置した方が無難なように思いますが……
その辺については考慮しない、ということで回答しますね。

Answer 1

元のコードをなるべく生かすとこんな感じかと。

    const w = $(window).width();

    const oh01 = parseInt($("#wrap .option_wrap:nth-of-type(2)").css('top'));
    const oh02 = parseInt($("#wrap .option_wrap:nth-of-type(3)").css('top'));

    const ov01 = (oh01 / w)*100;
    const ov02 = (oh02 / w)*100;

    $('.btn_list').each(function(i,target){
      const bh = parseInt($("dl", target).innerHeight());
      const vw = (bh / w)*100;


      const f01 = vw + ov01;
      const f02 = vw + ov02;

      $('dl', target).css('display','none');
        $("p.btn", target).on("click", function(){
          let targetList = $(this).parent();
          if ($(this).hasClass('active')) {
  // 開いている状態
                    $('.btn_list dl').not( $('dl', targetList) ).slideUp();
                    $('.btn_list p').not( $('p', targetList) ).removeClass('active');
                    $(this).removeClass('active').next().slideToggle();
                    $('#wrap .option_wrap:nth-of-type(2)').animate({'top': ov01 + 'vw'});
                    $('#wrap .option_wrap:nth-of-type(3)').animate({'top': ov02 + 'vw'});
          } else{
  // 閉じている状態
                    $('.btn_list dl').not( $('dl', targetList) ).slideUp();
                    $('.btn_list p').not( $('p', targetList) ).removeClass('active');
                    $(this).addClass('active').next().slideToggle();
                    $('#wrap .option_wrap:nth-of-type(2)').animate({'top': f01 + 'vw'});
                    $('#wrap .option_wrap:nth-of-type(3)').animate({'top': f02 + 'vw'});
          }
        });

    });

『簡素化できるポイントを見つけるコツ』は「慣れ」でしょうか。配列や、配列にできそうなもの（ここで言うと$('.btn_list')）に着目するといいと思います。