クローズボタンを設置したがなぜか非表示にならない

Question

  <div id="fr_btn">
    <a href="遷移先のリンク"><img src="frotin.png"></a>
  <div class="close_btn"><input type="checked">
    <img src="froting_close.png" alt="閉じるボタン"></div>
</div>

   #fr_btn {
      bottom: 1.4vw;
      position: fixed;
      z-index: 300;
      background-size: 100%;
      width: 100%;
      height:33vw;
    }

    .close_btn img {
     width: 4%;
     position: relative;
     top: -26.5vw;
     left: 91vw;
   }

    var $target = document.querySelector('#fr_btn')
    var $button = document.querySelector('.close_btn')
    $button.addEventListener('click', function() {
      $target.classList.toggle('is-hidden')
    })

froting_close.png ボタンを押すと　#fr_btn　で囲った要素が非表示になるようにしたいのですが
なぜか非表示にならず困っています。
他のcssの記述を変えたり試しましたがうまくいかず...詳しい方いらっしゃいますでしょうか？

解決したいこと

froting_close.png ボタンを押すと　#fr_btn　で囲った部分が非表示になる

##　補足
javascript、jQueryでできると思い試しましたがうまくいかずなのでもしcssのみでもできるなど他の方法でも構いません。
cssは装飾なのでもしかしたら今回は不要な記述かもしれませんが念のため記載しました。

Answer 1

is-hiddenに非表示という設定がされていませんよね？

.is-hidden{display:none}

Comments

[yambejp]

あと、jsをどの場所で指定しているかによるかも、
HTMLの先頭の方でやっているなら一工夫必要です

window.addEventListener('DOMContentLoaded', ()=>{
//ここにソースを書く
});

[bakio]

ありがとうございます！
yambejp　様のご回答で無事解決できました！
お時間割いていただき誠にありがとうございます。