HTMLだけで簡単なアコーディオンを作成する方法

2022年4月2日 2022年5月7日 3分11秒

1 HTMLだけで簡単なアコーディオンを作成する方法

HTMLだけで簡単なアコーディオンを作成する方法

アコーディオンとは、クリックやタップをすると、折りたたんだり開いたりできるコンテンツのことです。

これが、detailsタグとsummaryタグで簡単に作ることができます。

以前は、対応していないブラウザもありましたが、現在はほぼ、ブラウザ対応をしています。

Internet Explorerは対応をしていません。

ノーマルなコーディング方法

HTML

<details>
  <summary>ココをクリック！</summary>
  <p>
    アコーディオン風に開きます。
  </p>
</details>

表示例

ココをクリック！

アコーディオン風に開きます。

初めからアコーディオンを開く

初めからアコーディオンを開いておきたい場合は、detailsタグに、"open"をつけるだけです。

HTML

<details open>
  <summary>ココをクリック！</summary>
  <p>
    アコーディオン風に開きます。
  </p>
</details>

表示例

ココをクリック！

アコーディオン風に開きます。

簡単なレイアウト例

簡単なCSSの設定例です。
先頭の（▶）を消して、Font Awesomeのアイコンを表示するようにしています。

CSS

details {
  border: 1px solid rgba(0,0,0,.2);
  border-radius: 10px;
}

details summary {
  list-style: none;
  cursor: pointer;
  outline: none;
  padding: 10px;
  font-weight: bold;
}

details summary::before {
  font-family: FontAwesome;
  content: '\f067';
  margin-right: 1em;
  background-color: rgba(0,0,0,.2);
  padding: 3px;
  border-radius: 50%;
}

details[open] summary::before {
  content: '\f068';
}

/* safariで先頭の（▶）を表示しない */
details summary::-webkit-details-marker {
  display: none;
}

p {
  margin-left: 1em;
}