Vuetify3のアコーディオンでボタン一つで全てを開閉する

Vuetifyのアコーディオンはv-expansion-panelsを使用します。
しかし通常はリストそれぞれに開閉ボタンがついてる状態です。

そうではなくボタン一つで全てを開閉するようにしました。

※listはapi情報を取得、定義してる想定です。

html

<v-expansion-panels v-model="isOpenedPanels">
  <v-expansion-panel elevation="0">
    <v-expansion-panel-content>
      <ul>
        <li
          v-for="content in list"
          :key="content.id"
        >
          <div>
            {{content.title}}
            {{content.text}}
          </div>
        </li>
      </ul>
    </v-expansion-panel-content>
  </v-expansion-panel>
</v-expansion-panels>
<v-btn>{{ isOpen ? "閉じる" : "もっと見る" }}</v-btn>

TypeScript

const isOpen = ref(false)
const isOpenedPanels = ref([])
const toggleAllPanels = () => {
  isOpen.value = !isOpen.value
  if (isOpen.value) {
    isOpenedPanels.value = list.map(
      (_: number[], index: number[]) => index
    ) // 全て開く
  } else {
    isOpenedPanels.value = [] // 全て閉じる
  }
}

css

.v-expansion-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s;
}
.v-expansion-panel--active {
  max-height: 500px;
}

ポイントはheightではなくmax-heightにすることでアニメーションが発動します。