HTMLの折りたたみ機能2

HTMLの折りたたみ機能の、CSS別バージョン。

今回のポイント

borderで枠をつけたことで、前回とは違う印象になった。

「○○○を開く／閉じる」と文章にしていたのを、open/closeに変更した。

タイトル

説明文章1

説明文章2

説明文章3

角丸の枠線で囲うことで、折り畳を開いたときに、カードっぽい見た目にしてみた。

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

<style>
    details {
        border: 2px solid black;
        border-radius: 8px;
        padding: 0 .5em;
        width: 300px;
        height: fit-content;
        margin: .5em;
    }

    summary {
        padding: .5em 0;
        font-weight: bold;
    }

    details[open] summary {
        border-bottom: 1px solid black;
        margin: 0 0 .5em 0;
    }

    summary::after {
        content: "OPEN";
        border-radius: 4px;
        padding: 2px 4px;
        color: white;
        font-size: small;
        background-color: hotpink;
        position: relative;
        top: -1.5px;
        left: .5em;
    }

    details[open] summary::after {
        content: "CLOSE";
    }

    details p {
        margin: 0.5em 1em;
    }
</style>
<details>
    <summary>今回のポイント</summary>
    <p>borderで枠をつけたことで、前回とは違う印象になった。</p>
    <p>「○○○を開く／閉じる」と文章にしていたのを、open/closeに変更した。</p>
</details>
<details>
    <summary>タイトル</summary>
    <p>説明文章1</p>
    <p>説明文章2</p>
    <p>説明文章3</p>
</details>