tailwindcssでアコーディオンメニューを実装する

今日はtailwindcssでアコーディオンメニューを実装する方法を備忘録としてまとめていきたいと思います。
JITモードは導入済みです。

それではレッツゴー

完成形

バーをクリックすると


メニューがぬるっと出てきます。


ソースコードはこんな感じです。


こっちは設定ファイル


見にくいと思うので一応tailwind-playにも上げてます。
https://play.tailwindcss.com/DZHnrHpkEL

具体的な実装方法

拡張

まずはtailwindcssの拡張機能を使っていい感じのクラスを作っていきます。

tailwindの設定ファイルであるtailwind.config.jsに以下のように記述します。

module.exports = {
  mode: "jit",
  purge: {
    enabled: false,
    content: [
      #ここにpurgeするファイルを記述
    ],
  }
  theme: {
    extend: {
      transitionProperty: {
        maxHeightAndOpacity: "max-height, opacity",
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

themeをextendsしてtransitionPropertyにmax-heightとopacityを追加しました。
これはmax-heightとopacityの両方にtransitionをかける為です。

tailwindcssで以下のようにtransitionプロパティを複数設定すると、自分のVSCodeでは波線でエラーが出るので、

<div class="transition-colors transition-opacity duration-300 ease-in hover:text-blue-200 hover:opacity-50">こんにちは</div>

今回はconfigファイルでmax-heightとopacityをmaxHeightAndOpacityという名前でまとめています。

チェックボックス

アコーディオンメニューを実装する際には、inputのチェックボックスでチェックがついているか否かで挙動を変化させることができる仕様を用います。

labelにforでinputのidと同じ名前を設定すると、labelをクリックした時もチェックボックスにチェックがつくようになります。

<input type="checkbox" id="menu"/>
<label for="menu">ラベル</label>

これを利用してチェックがついていない場合はメニュー部分を非表示、チェックがついている場合にはメニュー部分を表示、というふうに振り分けます
アニメーションの部分は先ほど拡張したクラスを使います。

表示、非表示のロジックの部分を簡単に再現すると以下のようになります。

<div class="flex flex-col">
  <input type="checkbox" id="menu" class="peer" />
  <label for="menu">ここを押すとメニューが表示</label>
  <label for="menu" class="invisible peer-checked:visible">実際のメニュー部分</label>
</div>

checkbox自体にpeerというクラスを当てると、labelでpeer-checked:という擬似クラスを当てることができるようになります。
これでチェック前と後で挙動を変化させることができます。

実際にはこんな感じになります。


「ここを押すとメニューが表示」という部分を押すとチェックがついて「実際のメニュー部分」が表示されます。


これで表示、非表示の部分のロジックは完成です。

アニメーション

あとはこれにアニメーションを適用していくだけになります。
最初に拡張機能で作ったトランジションプロパティ「maxHeightAndOpacity」を使用します。

ちなみに中身はこんな感じです。
max-heightとopacityをtransition-propartyとして持つクラスになります。


では実際にアニメーションを追加してみます。
高さにtransitionがかかっているのをわかりやすくするために一番下にhrで線を入れています。

<div class="flex flex-col pl-20">
  <input type="checkbox" id="menu" class="peer" />
  <label for="menu">ここを押すとメニューが表示</label>
  <label for="menu" class="transition-maxHeightAndOpacity duration-500 ease-in max-h-0 peer-checked:max-h-[2000px] opacity-0 peer-checked:opacity-100">実際のメニュー部分</label>
  <hr class="w-[220px]" />
</div>

この部分でどのようにtransitionするのかを決めています。
max-heigthとopacityというプロパティに対してトランジションがかかります。

transition-maxHeightAndOpacity duration-500 ease-in-out

この部分でチェックが入っていない場合は高さを0、入った場合にmax-heightを2000に設定しています。
max-heightが2000なだけで実際は要素が持っている高さぶんしか広がりません。

max-h-0 peer-checked:max-h-[2000px] 

この部分でチェックが入っていない場合は透過度を0(非表示)、チェックが入っている場合には透過度を100(表示)に設定しています。

opacity-0 peer-checked:opacity-100

これで完成です。
画像で見るとわかりにくいですが実際にはメニュー部分がぬるっと表示されています。

まとめ

tailwindcssではこんな感じでアコーディオンメニューを実装できます。
一回やり方を理解してしまえば簡単なので皆さんもぜひ実装してみてください。
最後までごらんいただきありがとうございました！