折りたたみ可能なパネルの作成 - CSSのみを利用した折りたたみ領域 / アコーディオンパネル - CSS

CSSのみを利用した折りたたみ可能なパネル(折りたたみ可能領域)を実現するコードを紹介します。

概要

InputタグのCheckBoxを利用して折りたたみ可能なパネルを実装します。チェックボックスのチェックがついている場合とついていない場合でパネルの折りたたみを制御します。折りたたみの見出し部分をチェックボックスのラベル部分とし、ラベルをクリックするとチェックボックスにチェックが付く動作にします。
また、Checked疑似クラスと隣接セレクターを用いてチェックボックスにチェックが付いた場合とそうでない場合でのスタイルを切り替えることでパネルの表示、非表示を制御します。

最もシンプルな例

コードの量を最小にした、最もシンプルな動作のコードを紹介します。

コード

以下のコードを記述します。

CssExpandPanel.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="CssExpandPanel.css" />
</head>
<body>
   <label for="Panel1">見出し</label><input type="checkbox" id="Panel1" class="ExpandCheckBox" />
   <div class="panel">
     コンテンツですよ～
   </div>
</body>
</html>

CssExpandPanel.css

input[type="checkbox"].ExpandCheckBox {
  display: none;
}

input[type="checkbox"].ExpandCheckBox + div.panel {
  display: none;
}

input[type="checkbox"].ExpandCheckBox:checked + div.panel {
  display: block;
}

解説

下記コードにより、チェックボックスのチェック部分を非表示にしています。(ラベル部分は非表示になりません。また、チェックボックスが非表示でもチェックのON,OFFは動作します。)

input[type="checkbox"].ExpandCheckBox {
  display: none;
}

下記コードの部分がチェックされていない状態のスタイルです。"+ div.panel"を指定し、チェックボックスに隣接するpanelクラスのスタイルを定義します。この場合は"display: none"が指定されており、枠は非表示になります。~

input[type="checkbox"].ExpandCheckBox + div.panel {
  display: none;
}

チェックボックスがチェックされている状態のスタイルです。":checked"を指定することでチェックボックスにチェックがついた状態のスタイルを設定できます。先と同様に "+ div.panel"を指定し、チェックボックスに隣接するpanelクラスのスタイルを設定します。選択状態では "display: block;"を指定して枠を表示します。

input[type="checkbox"].ExpandCheckBox:checked + div.panel {
  display: block;
}

実行結果

HTMLファイルを表示します。下図の画面が表示されます。

"見出し"の部分をクリックすると"コンテンツですよ～"の文字が表示されます。

もう一度"見出し"をクリックすると"コンテンツですよ～"の文字が非表示になります。

折りたたみパネルの基本的な動作が実装できました。

折りたたみパネルらしい外観のコード例

先のシンプルなHTMLファイルのコードを修正してより折りたたみパネルらしい外観にします。

コード

以下のコードを記述します。

CssExpandPanel2.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="CssExpandPanel2.css" />
</head>
<body>
  <input type="checkbox" id="Panel1" class="ExpandCheckBox" />
  <label class="ExpandHeader" for="Panel1">見出し</label> 
  <div class="panel">
     コンテンツですよ～<br />
     ABCDEFG<br />
     あいうえお<br />
     かきくけこ<br />
   </div>
</body>
</html>

解説

HTMLファイルに大きな変更はありません。INPUTタグの順番を変更し、INPUT, Label, div の順番でタグを並べます。

CssExpandPanel2.css

input[type="checkbox"].ExpandCheckBox {
  display: none;
}

input[type="checkbox"].ExpandCheckBox + .ExpandHeader {
  width:320px;
  display:block;

  text-align:center;
  background-color:#c1deff;

  border:solid 1px #0058ba;
}

input[type="checkbox"].ExpandCheckBox:checked + .ExpandHeader {
  width:320px;
  display:block;

  text-align:center;
  background-color:#c1deff;
  
  border-top:solid 1px #0058ba;
  border-left:solid 1px #0058ba;
  border-right:solid 1px #0058ba;
  border-bottom:none;
}


input[type="checkbox"].ExpandCheckBox + label + div.panel {
  display: none;
}

input[type="checkbox"].ExpandCheckBox:checked + label + div.panel {
  display: block;
  width:320px;
  border-left:solid 1px #0058ba;
  border-right:solid 1px #0058ba;
  border-bottom:solid 1px #0058ba;
}

解説

チェックボックスは非表示にします。

input[type="checkbox"].ExpandCheckBox {
  display: none;
}

下記コードにてヘッダ部分のスタイルを設定します。チェックボックスにチェックがついている場合といない場合のスタイルを設定します。パネルが開いた場合は下部の枠線を非表示にしています。また、label要素はインライン要素のため、display:blockを追加しブロック化しています。

input[type="checkbox"].ExpandCheckBox + .ExpandHeader {
  width:320px;
  display:block;

  text-align:center;
  background-color:#c1deff;

  border:solid 1px #0058ba;
}

input[type="checkbox"].ExpandCheckBox:checked + .ExpandHeader {
  width:320px;
  display:block;

  text-align:center;
  background-color:#c1deff;
  
  border-top:solid 1px #0058ba;
  border-left:solid 1px #0058ba;
  border-right:solid 1px #0058ba;
  border-bottom:none;
}

折りたたみパネル部分のスタイルを設定します。チェックボックスがついていない場合は非表示にしています。

input[type="checkbox"].ExpandCheckBox + label + div.panel {
  display: none;
}

input[type="checkbox"].ExpandCheckBox:checked + label + div.panel {
  display: block;
  width:320px;
  border-left:solid 1px #0058ba;
  border-right:solid 1px #0058ba;
  border-bottom:solid 1px #0058ba;
}