CSSでアコーディオン機能を実装する方法

jsを使わずにCSSのみで、クリックするとコンテンツが開閉するアコーディオン機能を実装する方法の備忘録です。

作成するアコーディオンのサンプルです。ボタンをクリックすると、下のリスト部分の表示・非表示が切り替わります。

  • Short
  • Tall
  • Grande
  • Venti
  • Trenta

HTMLでボタンと開閉する部分を作成する

HTMLでボタンと、タブと表示を切り替えるコンテンツの部分を作成します。

<div class="accordion">
  <input id="ac" name="accordion_name" type="checkbox" />
  <label for="ac">SAMPLE</label>
  <ul>
    <li>Short</li>
    <li>Tall</li>
    <li>Grande</li>
    <li>Venti</li>
    <li>Trenta</li>
  </ul>
</div>

ボタンは、inputのチェックボックスを利用して作成します。チェックを入れる四角いフォームの部分は、CSSで非表示にして使用します。label部分がボタンになり、ulのリストが開閉する部分になります。
<input>のidと<label>のforは、共通の値を設定します。

CSSを設定する

input {
  display: none;
}
label {
  cursor: pointer;
  position: relative;
  color: #fff;
  background-color: #13c3ac;
  font-weight: bold;
  padding: 10px;
  width: 300px;
  display: block;
}
label::after {
  content:"+";
  position: absolute;
  right: 10px;
}
input:checked ~ label::after {
  content:"−";
}
ul{
  max-height: 0px;
  overflow: hidden;
  transition: max-height 1s;
  margin-top: 20px;
}
input:checked ~ ul{
  max-height: 100vh;
}

inputに「display: none;」を設定することで、チャックボックスの四角いアイコンを非表示にしています。

labelは、「cursor: pointer;」を設定してボタンのようなデザインになるようにCSSを設定しています。
疑似要素afterに、「content:”+”;」で開閉時に切り替わるアイコン部分を作成しています。

開閉する部分のulは、「max-height: 0px;」で高さをなくすことで非表示にしています。バタンがクリックされ、チャックボックスが「checked」の状態になった時、「max-height: 100vh;」になることで内容が表示されます。

「transition: max-height 1s;」でスライドするようなアニメーションの速度を設定しています。

Share on Twitter
関連記事
CSSで実装する文字を回転させるホバーエフェクトまとめ
CSSで実装する文字を回転させるホバーエフェクトまとめ
CSSで擬似要素が表示されない原因と解決策
CSSで擬似要素が表示されない原因と解決策
CSSのaspect-ratioでアスペクト比(縦横比)を固定する方法
CSSのaspect-ratioでアスペクト比(縦横比)を固定する方法