details要素
details要素はユーザーが追加情報やコントロールを得ることができるディスクロージャーウィジェットをマークアップすることができる要素です。
details要素は2014年2月4日の仕様まではHTML5の仕様に存在しましたが、2014年4月29日の仕様で削除され、HTML5.1で再定義されました。
summary要素が冒頭にある場合はそれを説明とし、summary要素がない場合はユーザーエージェントは「詳細」など適したキーワードを利用するのがよいでしょう。
<details>
<summary>ファイル変換中 <progress max="375505392" value="97543282"></progress> 25%</summary>
<dl>
<dt>変換速度:</dt> <dd>452KB/s</dd>
<dt>変換元ファイル名:</dt> <dd>/home/rpausch/raycd.m4v</dd>
<dt>変換後ファイル名:</dt> <dd>/var/www/lectures/raycd.m4v</dd>
<dt>期間:</dt> <dd>01:16:27</dd>
</dl>
</details>open属性
open属性を付加することで詳細が最初から表示された状態で表示することができます。
<details open>
<summary>ファイル変換中 <progress max="375505392" value="97543282"></progress> 25%</summary>
<dl>
<dt>変換速度:</dt> <dd>452KB/s</dd>
<dt>変換元ファイル名:</dt> <dd>/home/rpausch/raycd.m4v</dd>
<dt>変換後ファイル名:</dt> <dd>/var/www/lectures/raycd.m4v</dd>
<dt>期間:</dt> <dd>01:16:27</dd>
</dl>
</details>参考URL
4.11.1 The details element - HTML5 - W3C
4.11.1 The details element - HTML5.1 - W3C
登録日 : 2014年05月18日 最終更新日 : 2015年2月8日