HTML 5での<details>要素をエミュレートするスクリプトのサンプル。

実際のサンプル。

• リンク先には意味はありません。

サンプルのHTMLソース。

• 一部異なる箇所もあります。
• 本当は、スクリプトは文書の後ろの方に書くと良いのですが、今回はサンプルと言う事で前の方に書いております。

<script type="text/javascript" src="Details_emulator.js"></script>
<details>
    <summary>三次元(アイドル女優)</summary>
    <ul>
        <li><a href="#">堀北真希</a></li>
        <li><a href="#">上戸彩</a></li>
        …
        </ul>
    </details>

<details>
    <summary>二次元(架空キャラクタ)</summary>
    <ul>
        <li><a href="#">博麗霊夢</a></li>
        <li><a href="#">霧雨魔理沙</a></li>
        <li><a href="#">チルノ(&#9320;)</a></li>
        …
        </ul>
    <form action="#">
        <p>検索：<input type="text" name="q" /></p>
        </form>
    </details>

<details open="open">
    <summary>サイトのご案内</summary>
    <ul>
        <li><a href="#">当サイトについて</a></li>
        <li><a href="#">管理者について</a></li>
        <li><a href="#">管理者の日記</a></li>
        <li><a href="#">ご連絡</a></li>
        </ul>
    </details>

三番目の<details>要素には open="open" 属性が与えられている事に注目してください。

その結果、初めから内容が全部表示されるようになっていて、クリックで非表示に出来るようになっております。

サンプルでのCSS。

<summary>要素にマウスカーソルが乗ったときに、通常のアンカーと同じようにクリックが出来る事を示すと便利です。

いや、そうしないとクリック可能と分からなくなる恐れもあります。

当サイトでは、a:hover セレクタと同じスタイルを当てております。

但し、注意しておきたい事として、<a>要素と違って、マウスカーソルは指定しないと通常のものと変わりませんので、cursorプロパティも併せて指定する事となります。

summary:hover,
a:link:hover, a:link:hover *,
a:visited:hover, a:visited:hover * {
    color: #000;
    background: #efe;
    text-decoration: underline;
    cursor: pointer;
    }

加えて、<details>要素と<summary>要素には、いずれも display: block; プロパティを与えておく必要があります。

現行のHTML 4/XHTML 1世代のウェブブラウザは、これらの要素を未知の要素とし、従ってデフォルトで display: block; プロパティは与えられず、インライン式の表示になる筈だからです。