手順ヒント

1. アコーディオンの中身とアイコンを非表示にする。

アコーディオンの中身と閉じているとき、開いているときのアイコンをVueのディレクティブで管理しましょう。

index.html

<div class="menu menu--red">
  <a class="menu__head">
    <h1 class="menu__title">アコーディオン1</h1>
    <!-- 閉じたときのアイコン -->
    <i class="fas fa-chevron-down fa-2x menu__icon"></i>
    <!-- 開いてるときのアイコン -->
    <i class="fas fa-chevron-up fa-2x menu__icon"></i>
  </a>
  <!-- アコーディオンの中身 -->
  <div class="menu__body">
    <div class="menu__content">
      <p class="menu__text">アコーデオン1の中身</p>
      <p class="menu__text">アコーデオン1の中身</p>
    </div>
  </div>
</div>

2. アイコンの表示、非表示を管理する。

アコーディオンをクリックしたら中身が開いてアイコンが変わるようにしましょう。