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

アコーディオンの作成方法

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

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

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

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

今回紹介するアコーディオンは以下のようになります。

See the Pen Untitled by take it easy (@take-it-easy) on CodePen.

HTML

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

<details open>

CSS

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

details summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  outline: none;
  padding: 10px;
  font-weight: bold;
  background-color: #B52F14;
  color: #fff;
  border-radius: 10px;
}

details summary::after {
  position: absolute;
  top: 3px;
  right: 10px;
  content: '▼';
  font-size: 18px;
  margin-right: .5em;
  padding: 5px;
}

details[open] summary::after {
  content: '▲';
}

details[open] summary {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

details summary::-webkit-details-marker {
  display: none;
}

p {
  margin-left: 1em;
}