datailとsummaryでつくるアコーディオン

こんにちは～
今日はdetailsタグとsummaryタグを使用してアコーディオンを作ってみました。

こういった折り畳み式のアコーディオンって私は普段Q&A的なページで使用します。
みなさまそれぞれソースの特徴あると思うんですけど、dtとかddとJS組み合わせて使っている人
多いのではないんでしょうかなね～(*’V’*)

ちなみに私は以下のような形でいつも実装してます。

See the Pen よく使うアコーディオンの方法 by sayuri (@giraffeweb) on CodePen.0

みなさんも上記の方法を使用している方多いのはないでしょうか？

今回試したのはdetailsタグとsummaryタグとcssだけで実装する方法です！
早速ソースから♪

See the Pen detailsタグとsummaryタグでアコーディオン by sayuri (@giraffeweb) on CodePen.0

JSもcssでの大がかりソースもいらずさくっとシンプルなものであれば実装できます。

HTMLとCSSは本当にこれだけ！

<details>
  <summary>Question01</summary>
  <p>Answer01</p>
</details>

<details>
  <summary>Question02</summary>
   <p>Answer02</p>
</details>

<details>
  <summary>Question03</summary>
   <p>Answer03</p>
</details>

summary {
  cursor: pointer;
  padding: 10px;
  border: 1px solid #ddd;
  background: #f4f4f4;
}

details {
  height: 10px;
 margin-bottom: 50px;
  transition: .5s;
}

details[open] {
  height: 60px;
}
p {
  padding: 10px;
  margin: 0;
  border: 1px solid #ddd;
}

ただこのdetailsタグとsummaryタグはIEとEdgeには対応しておりません・・

そこだけ注意してみなさんも使用してみてください！

Share: