details要素

次に紹介するのはdetails要素です。

このdetails要素は、詳細情報を表します。

詳細情報とは細かな情報のことで、details要素の目的はそういった細かい情報を隠しておくことにあります。

というのも、細かい情報はいちいち見たくない人がいるかもしれないので、見たい人だけ見られるようにすることができます。

さらに、summary要素があります。これは、その詳細情報の要約や見出しを表すもので、恐らく詳細が非表示になっていても要約として表示されることでしょう。これの使い方は前回・前々回のcaption要素・figcaption要素と同じです。

details要素がある場合、ユーザーは詳細の表示・非表示を切り替えることができるはずですが、現在（2011年3月）、まだこの機能をもつブラウザはありません。そこで、効果的に利用したければJavaScriptを使うことになるでしょう。

使用例としては、例えば、RPGなどを作ったとしたら、こんな風に使用できるかもしれません。

<details>
<summary>
  <p>レベルが<b>21</b>に上がった！</p>
</summary>
<p> <b>力</b>が2上がりました。</p>
<p> <b>防御</b>が1上がりました。</p>
<p> <b>魔力</b>が1上がりました。</p>
<p> <b>速さ</b>が3上がりました。</p>
<p> <b>運</b>が0上がりました。</p>
</details>

「レベルが上がった」ということをユーザーに知らせる際に、各パラメータの詳細情報を隠しておいて、見たい人のみに見せることができます。

「最初から見せたいけど隠せるようにしたい」という場合には、次のようにopen属性をつけておくと良いでしょう。

<details open>