new   2日前に投稿

details/summary 要素でアコーディオン

2020年10月19日

この記事は約 4 分で読めます。

4.5

details要素、summary要素は、
HTML5から新たに追加された要素です。

details要素は、
ユーザーが表示、非表示を切り替えられる
コンテンツを設置できます。

summary要素は、要約を表す要素です。
details要素のキャプションであると同時に、
クリックすることで開閉する
ボタンの役割を果たします。

簡単に言うと、
HTMLを記述するだけで、
クリックすると開閉する
アコーディオンが実装されますよって事です。

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

↑のように CSSなしでも実装できますが、
CSSを加えて装飾してみました。

結果が以下です。
アイコンに Font Awesome 5を使用しています。

クリックで詳細情報を表示。 クリックで詳細情報を非表示。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。
<details> <summary> <span class="click-open">クリックで詳細情報を<span style="color:#ff7f7f;">表示。</span></span>
<span class="click-close">クリックで詳細情報を<span style="color:#7f7fff;">非表示。</span></span>
</summary> <div class="details_content">詳細情報</div> </details>
details {
  height: 43px;
  margin-bottom: 30px;
  overflow: hidden;
  transition: all .7s
}

details[open] {
  height: calc(165px + 43px);
  transition: all .8s
}

details[open] .click-open {
  display: none
}

details:not([open]) .click-close {
  display: none
}

summary {
  display: inline-block;
  font-weight: bold;
  outline: none;
  cursor: pointer;
  padding: 6px 12px 6px 6px;
  background-color: #ffeaff;
  border-radius: 10px;
  transition: .4s
}

summary:hover {
  color: #4c6473;
  background-color: #fff7ef
}

.details_content {
  padding: 10px 5px 0 20px;
  height: auto;
  overflow-y: auto
}

@media(max-width:450px) {
  details[open] {
    height: calc(100% - 43px);
  }
}

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

details summary::before {
  font-family: "Font Awesome 5 Free";
  content: '\f103';
  font-weight: 900;
  color: #ff7f7f;
  margin: 0 8px 0 6px;
}

details[open] summary::before {
  content: '\f102';
  color: #7f7fff;
}
貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
details/summary 要素でアコーディオン