2022/1/12

【CSSのみ】アコーディオン作成方法！動く閉じるボタンと仕組みも解説

この記事からわかること

CSSのみでアコーディオンメニューを作る方法
コードの詳しい解説
自作するときのポイントと仕組み

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

アコーディオンメニューのコード

作っていくアコーディオンメニュー

ここをクリックすると開く

非表示になっている部分

HTMLコード

<div class="l-accordion">
  <input id="ac1" type="checkbox">
  <label for="ac1" class="l-accordion-switch">ここをクリックすると開く</label>
  <div class="l-accordion-inside">
    <p>非表示になっている部分</p>
  </div>
</div>

CSSコード

.l-accordion input {
  display: none;
}

.l-accordion .l-accordion-inside {
  border: 2px solid #555;
  height: 0;
  opacity: 0;
  transition: 0.5s;
}

.l-accordion input:checked~.l-accordion-inside {
  height: auto;
  opacity: 1;
}

.l-accordion .l-accordion-switch {
  position: relative;
  display: block;
  background-color: #e7e7e7;
  font-weight: bold;
  padding: 8px;
  cursor: pointer;
}

.l-accordion .l-accordion-switch::before,
.l-accordion .l-accordion-switch::after {
  content: '';
  position: absolute;
  display: block;
  width: 14px;
  height: 3px;
  background: #555;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

.l-accordion .l-accordion-switch::after {
  transform: translateY(-50%) rotate(90deg);
  transition: 0.5s;
}

.l-accordion input:checked~.l-accordion-switch::after {
  transform: rotate(0);
  transition: 0.5s;
}

CSSのみのアコーディオンメニューの仕組み

ここからはJavascript(jQuery)を使わないで実装できるアコーディオンメニューの仕組みやポイントを解説していきます。

まずアコーディオンメニューを構成しているのは3つの部品です。

3つの部品

常に表示されている部分
表示されている部分の開く/閉じるボタン
ボタン次第で表示/非表示を切り替えて部分

この3つの部品を動かすための仕組み部分が以下の通りになります。

仕組み

input(check box)の状態で分岐
未check→非表示
check→表示
表示/非表示は「display:none」と「opacity:0→1」で切り替える
ボタンもチェックの有無でCSSを切り替え

アコーディオンメニューの作り方

ここからは上記のポイントを踏まえて1つずつ解説していきます。この仕組みさえ覚えておけば簡単に自作、または編集することができるようになると思います。

input要素と他要素のリンク

まずはHTMLを書き上げます。

<div class="l-accordion">
  <input id="ac1" type="checkbox">
  <label for="ac1" class="l-accordion-switch">ここをクリックすると開く</label>
  <div class="l-accordion-inside">
    <p>非表示になっている部分</p>
  </div>
</div>

input要素にid属性を付与して、同じ値をリンクさせたい要素(今回はlabel)のfor属性に付与することで2つの要素をリンクさせることができます。

これでlabel部分をクリックするだけでinput要素(check box)のcheckが切り替えられるようになります。

input要素が表示している部分は不要なので非表示にしておきます。

.l-accordion input {
  display: none;
}

表示/非表示を切り替える

CSSではinput要素(check box)がcheckされているかいないかによってもスタイルを当て分けることができます。

未チェック時のスタイル

.l-accordion input {
}

チェック時のスタイル

.l-accordion input:checked {
}

この仕組みによってアコーディオンの中身部分(l-accordion-inside)を未チェックの時は非表示かつopacity(透明度)を0にしておき、チェック時に表示かつopacityを1にすることで表示させます。

transitionをつけることでopacityがゆっくり切り替わるのでフワッとした表示が実現できます。

transitionは数字の変化に対して適応するのでdisplayだけでは動作しません。

.l-accordion .l-accordion-inside {
  border: 2px solid #555;
  height: 0;
  opacity: 0;
  transition: 0.5s;
}

.l-accordion input:checked~.l-accordion-inside {
  height: auto;
  opacity: 1;
}

閉じるボタンの挙動

閉じるボタンもcheckの有無でスタイルを分けて定義すれば実装できます。

今回は非表示時は「＋」、表示時は「−」、クリック時に滑らかに変化する様に実装したいと思います。

閉じるボタンは擬似要素部分(::beforeと::after)に定義します。

::before部分は「−」を::after部分は「|」⇆「−」を行き来する部分を作っていきます。

.l-accordion .l-accordion-switch {
  position: relative;
  display: block;
  background-color: #e7e7e7;
  font-weight: bold;
  padding: 8px;
  cursor: pointer;
}

.l-accordion .l-accordion-switch::before,
.l-accordion .l-accordion-switch::after {
  content: '';
  position: absolute;
  display: block;
  width: 14px;
  height: 3px;
  background: #555;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

.l-accordion .l-accordion-switch::after {
  transform: translateY(-50%) rotate(90deg);
  transition: 0.5s;
}

.l-accordion input:checked~.l-accordion-switch::after {
  transform: rotate(0);
  transition: 0.5s;
}

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

Web制作