CSS <details>タグ：スタイルの装飾

<style>
    .demo-details-juqery-accordion {
        padding: 0 2rem;
        background-color: #f1f9eb;
        border: 1px solid yellowgreen;
        border-radius: 0.5rem;
        margin-bottom: 1rem;
    }
    .demo-details-juqery-accordion:last-child {
        margin-bottom: 0;
    }
    .demo-details-juqery-accordion summary::-webkit-details-marker {
        display: none;
    }
    .demo-details-juqery-accordion summary {
        display: block;
        padding: 2rem 3rem 2rem 0;
        font-weight: 600;
        cursor: pointer;
        position: relative;
    }
    .demo-details-juqery-accordion summary::before,
    .demo-details-juqery-accordion summary::after {
        content: "";
        position: absolute;
        width: 1rem;
        height: 2px;
        background-color: #222;
        right: 1rem;
        top: 2.5rem;
    }
    .demo-details-juqery-accordion summary::after {
        transform: rotateZ(90deg);
    }
    .demo-details-juqery-accordion p {
        padding-bottom: 2rem;
        display: none;
    }
    .demo-details-juqery-accordion[open] summary::after {
        display: none;
    }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<details class="demo-details-juqery-accordion">
    <summary>短い内容のお知らせタイトルです。</summary>
    <p>
        「ティム・バーナーズ＝リー」によって1989年に考案されたワールド・ワイド・ウェブ（World Wide Web, WWW, W3）の
        ハイパーテキストシステムを、私たちは簡単に「Web」と呼んでいます。
        現在では、私たちの日常生活において単に普及しているというレベルを超え、絶対的な地位を占めています。
    </p>
</details>
<details class="demo-details-juqery-accordion">
    <summary>短い内容のお知らせタイトルです。</summary>
    <p>
        「ティム・バーナーズ＝リー」によって1989年に考案されたワールド・ワイド・ウェブ（World Wide Web, WWW, W3）の
        ハイパーテキストシステムを、私たちは簡単に「Web」と呼んでいます。
        現在では、私たちの日常生活において単に普及しているというレベルを超え、絶対的な地位を占めています。
    </p>
</details>
<details class="demo-details-juqery-accordion">
    <summary>短い内容のお知らせタイトルです。</summary>
    <p>
        「ティム・バーナーズ＝リー」によって1989年に考案されたワールド・ワイド・ウェブ（World Wide Web, WWW, W3）の
        ハイパーテキストシステムを、私たちは簡単に「Web」と呼んでいます。
        現在では、私たちの日常生活において単に普及しているというレベルを超え、絶対的な地位を占めています。
    </p>
</details>
<script>
    const $_details = $(".demo-details-juqery-accordion");
    const $_summary = $_details.find("summary");

    $_summary.on("click", function(e) {
        e.preventDefault();

        const $_this = $(this);
        const $_this_details = $_this.parent("details");
        const $_this_details_p = $_this_details.find("p");
        const $_this_details_open = $_this_details.attr("open");

        if (! $_this_details_open) {
            $_this_details.prop("open", true);
            $_this_details_p.stop().slideDown(600);
        } else {
            $_this_details_p.stop().slideUp(300, function() {
                $_this_details.prop("open", false);
            });
        }
    });
</script>