Home > CSS > cssだけで作れる！アコーディオンの実装方法

cssだけで作れる！アコーディオンの実装方法

CSS2021.05.11

jsで当たり前のように作っていた、アコーディオンもchecked疑似クラスと～を組み合わせたセレクタを使用すれば、cssだけで作れてしまうので紹介します。

少ないcssで実装できるので、あまりchecked疑似クラスと～の組み合わせを使ったことがない人でも理解しやすいと思います。

~（チルダ）を使ったcssのセレクタ指定方法！:checked疑似クラスと使うと幅が広がるよ

このサイトではよく使っている:checked疑似クラスと~（チルダ）を組み合わせたセレクタを使うとjsのクリックイベントのような使用感でcs・・・。

この記事の目次

今回実装するもの
アコーディオン用HTMLの準備
アコーディオン用のcss

今回実装するもの

色々なサイトのよくある質問とかで使われているコンポーネントがアコーディオンです。

質問内容が書かれたラベル部分をクリックすると、答えが出てくるような仕組みです。

サンプル

これはアコーディオンですか？: はい！アコーディオンです。

どんなアコーディオンですか？: cssで動かしているアコーディオンです。

アコーディオン用HTMLの準備

アコーディオンはコンポーネントをひとつひとつ用意するような形でマークアップしてみました

div要素の中にチェックボックスとdl・dt・dd要素を兄弟になるように配置し、dt要素の中にlabel要素を仕込みました

<div class="accordion">
 <input type="checkbox" id="accordion1" class="checkbox">
  <dl>
    <dt><label for="accordion1">アコーディオンですか？</label></dt>
    <dd>
      はい！アコーディオンです。
    </dd>
  </dl>
</div>
<div class="accordion">
 <input type="checkbox" id="accordion2" class="checkbox">
  <dl>
    <dt><label for="accordion2">どんなアコーディオンですか？</label></dt>
    <dd>
      cssで動かしているアコーディオンです。
    </dd>
  </dl>
</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<dl>

<dt><label for="accordion1">アコーディオンですか？</label></dt>

<dd>

はい！アコーディオンです。

</dd>

</dl>

</div>

<dl>

<dt><label for="accordion2">どんなアコーディオンですか？</label></dt>

<dd>

cssで動かしているアコーディオンです。

</dd>

</dl>

</div>

アコーディオン用のcss

cssは矢印やそのアニメーションがあるので長く感じるかも知れませんが、実際にアコーディオンを動かしている部分は、かなり少ない行数で収まります。

一つ注意点があり、「height:0」から「height:auto」とすると、高さの変化にアニメーションがつかないので、ぱきっと出てくる様になってしまいます。

ここで紹介しているものは、paddingを上下につけることでアニメーションぽくしていますが、きれいにアニメーションさせたいのであれば、heughtはautoではなく絶対値を指定する必要があります

/*チェックボックスを消す*/
.checkbox{
  display: none;
}

/*アコーディオンの大きさと位置調整*/
.accordion{
  width: 600px;
  margin: 0 auto 20px;
}

/*アコーディオンのラベルの設定*/
.accordion dt{
  background-color: #d3ffd8;
}

.accordion dt label{
  position: relative;
  display: block;
  padding: 10px 20px;
  cursor: pointer;
}

/*ラベル内の矢印の設定*/
.accordion dt label::after{
  content:'';
  display: block;
  border-left:7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 10px solid #797676;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translate(0,-50%);
  transition:.4s .4s;
}

/*表示される要素の基本設定*/
.accordion dd{
  height: 0;
  transition:.4s;
  overflow: hidden;
  padding: 0 20px;
  border: solid 2px transparent;
}

/*ラベル内の矢印のアニメーション設定*/
.checkbox:checked ~ dl dt label::after{
  transform: translate(0,-50%) rotate(-180deg);  
}

/*表示される要素のアニメーション設定*/
.checkbox:checked ~ dl dd{
  height: auto;
  padding: 10px 20px;
  border: solid 2px #d3ffd8;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

/*チェックボックスを消す*/

.checkbox{

display: none;

}

/*アコーディオンの大きさと位置調整*/

.accordion{

width: 600px;

margin: 0 auto 20px;

}

/*アコーディオンのラベルの設定*/

.accordion dt{

background-color: #d3ffd8;

}

.accordion dt label{

position: relative;

display: block;

padding: 10px 20px;

cursor: pointer;

}

/*ラベル内の矢印の設定*/

.accordion dt label::after{

content:'';

display: block;

border-left:7px solid transparent;

border-right: 7px solid transparent;

border-top: 10px solid #797676;

position: absolute;

top: 50%;

right: 20px;

transform: translate(0,-50%);

transition:.4s .4s;

}

/*表示される要素の基本設定*/

.accordion dd{

height: 0;

transition:.4s;

overflow: hidden;

padding: 0 20px;

border: solid 2px transparent;

}

/*ラベル内の矢印のアニメーション設定*/

.checkbox:checked ~ dl dt label::after{

transform: translate(0,-50%) rotate(-180deg);

}

/*表示される要素のアニメーション設定*/

.checkbox:checked ~ dl dd{

height: auto;

padding: 10px 20px;

border: solid 2px #d3ffd8;

}

最近～とchecked疑似クラスの記事ばかり書いていて飽きてきたしネタ切れなので、当分の間他の記事を書きます。

この記事の目次

今回実装するもの
アコーディオン用HTMLの準備
アコーディオン用のcss

POPULAR

JS2021.04.03

『slick』の基本的な使い方（オプションなど）を細かくまとめていく

CSS2019.02.14

CSSだけでスライドショー

JS2022.05.06

swiper.js（8.1.4）を使ってゆっくり等速で流れる無限ループスライダーを作ってみました

PHP2021.10.12

IEにはそろそろ別れを告げたいのでIEのユーザーだけリダイレクトしてみた

CSS2021.12.05