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

2023.02.24
HTML&CSS

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

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

SAMPLE

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;」でスライドするようなアニメーションの速度を設定しています。