HTMLの折りたたみ機能

HTMLの折りたたみ機能について、自分で忘れないためのメモです。

マウスでクリックすることで、開いたり、閉じたりするようなことがしたい場合があります。下のような感じ。

折りたたみ
details
開いたり、閉じたりする「折りたたみ」を作成することができる。
summary
detailsの要約、見出しになる。
ここをクリックすると、折りたたみを開閉する。

もっと詳しい使い方は、 https://developer.mozilla.org/ja/docs/Web/HTML/Element/details を参照しよう。

details要素とsummary要素を使っています。（CSSで外観をボタン風に整えています。）

HTML（とCSS)のソースは下記の通り。

<style>
    summary {
        padding: .5em 1em;
        background-color: #F0F0F0;
        font-weight: bold;
        width: max-content;
        border: 1px solid black;
        border-radius: 4px;
    }

    summary::after {
        content: "を開く";
    }

    details[open] summary::after {
        content: "を閉じる";
    }

    summary:hover {
        background-color: #E0E0E0;
    }

    details p,
    dt {
        margin: 0.5em 1em;
    }
</style>

<details>
    <summary>折りたたみ</summary>
    <dt>details</dt>
    <dd>開いたり、閉じたりする「折りたたみ」を作成することができる。</dd>
    <dt>summary</dt>
    <dd>detailsの要約、見出しになる。</dd>
    <dd>ここをクリックすると、折りたたみを開閉する。</dd>
    <p>もっと詳しい使い方は、
        <a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/details">
            https://developer.mozilla.org/ja/docs/Web/HTML/Element/details
        </a>
        を参照しよう。
    </p>
</details>

コメント