【脱Jquery】CSS Gridでスライド系アニメーション（slideDown、slideUp、slideToggle）を実装する

<button type="button" id="toggle-button-1" class="js-toggle__button" aria-expanded="false" aria-controls="toggle-1">
  開閉ボタン
</button>

<div class="js-toggle__panel" id="toggle-1" role="region" aria-hidden="true" aria-labelledby="toggle-button-1">
  <div class="js-toggle__body">
    開閉パネルのコンテンツ
  </div>
</div>

.js-toggle__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s cubic-bezier(.16, 1, .3, 1);
}
.js-toggle__panel[aria-hidden="false"] {
  grid-template-rows: 1fr;
}
.js-toggle__body {
  overflow: hidden;
}

/* パネルが開いている時 */
.js-toggle__button[aria-expanded="true"] {
}

/* パネルが閉じている時 */
.js-toggle__button[aria-expanded="false"] {
}

//【アクセシビリティ対応あり】CSS gridで実装する開閉アニメーション
function cssGridToggle() {
  const toggleButtons = document.querySelectorAll('.js-toggle__button');
  //対象が存在しない場合は終了
  if(toggleButtons.length === 0) {
    return;
  }

  //真偽値を文字列で返す
  function getBooleanString(boolean) {
    return boolean.toString();
  }
  
  toggleButtons.forEach(toggleButton => {
    //開閉パネルを取得
    const targetPanelId = toggleButton.getAttribute('aria-controls');
    const targetPanel = document.getElementById(targetPanelId);
    //開閉パネルが存在しない場合はイベントを設定しない
    if(!targetPanel) {
      return;
    }
    toggleButton.addEventListener('click', function() {
      //パネルが開いているかどうかチェック
      const isOpen = targetPanel.getAttribute('aria-hidden') === 'false';
      //アクセシビリティ対応・表示を切り替え
      toggleButton.setAttribute('aria-expanded',getBooleanString(!isOpen));
      targetPanel.setAttribute('aria-hidden',getBooleanString(isOpen));
    });
  });
}

cssGridToggle();