Details風表示

shiogumar

License: MIT License

Fork
0
Fav
0
View
173
  • Play

Fullscreen

Smart Phone

  • Readme
  • JavaScript 31 lines
  • HTML 14 lines
  • CSS 44 lines
Details風表示

Blogger で執筆中に <details> 要素を使うと、なぜかWYSIWYG表示するたびに <br/> タグが増えていきます。
それでは何かと困るので、 div や h3 などの要素で代用する仕組みを作ってみました。

世間一般には一切需要がないと胸を張って言えます。えっへん。

使い方
0.この JavaScript と CSS を表示したいページに読み込ませます。
1.details クラスの要素を作ります。
2.summary クラスの要素に概要を書いて下さい。
3.あとは自由に詳細コンテンツを書いて下さい。

その他
4.開いた状態をデフォルトにしたい場合は、 details 要素に data-open="true" を入れます。


ちなみに、summary 以外を消す方法はCSSを使っていて、

・open 属性のない details 要素の font-size を 0 にすることで details の子のテキストノードを非表示にする
・summary 要素の font-size を初期化することで summary だけテキストノードを復活させる
・open 属性のない details 要素の子で、かつ summary 以外のエレメントノードをすべて非表示にする

という感じです。で、details 要素の open 属性を付けたり消したりしてるだけです。

ちなみに、複数 summary 入れられたり、 summary の前にテキストがあっても良かったり、
わりと寛容です!

details 要素の外見を細かく変更したいなぁ、というときにも使えるかも。
  • Details風表示
  • Details風表示

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

shiogumar

Author

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags