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)의
        하이퍼텍스트 시스템을 우리는 간단히 "웹"이라 부릅니다.
        현재 우리의 일상에서 대중화된 것 이상으로 절대적 위치를 차지하고 있습니다.
    </p>
</details>
<details class="demo-details-juqery-accordion">
    <summary>짧은 내용의 공지사항 제목입니다.</summary>
    <p>
        "팀 버너스리"에 의해 1989년 고안된 월드 와이드 웹(World Wide Web, WWW, W3)의
        하이퍼텍스트 시스템을 우리는 간단히 "웹"이라 부릅니다.
        현재 우리의 일상에서 대중화된 것 이상으로 절대적 위치를 차지하고 있습니다.
    </p>
</details>
<details class="demo-details-juqery-accordion">
    <summary>짧은 내용의 공지사항 제목입니다.</summary>
    <p>
        "팀 버너스리"에 의해 1989년 고안된 월드 와이드 웹(World Wide Web, WWW, W3)의
        하이퍼텍스트 시스템을 우리는 간단히 "웹"이라 부릅니다.
        현재 우리의 일상에서 대중화된 것 이상으로 절대적 위치를 차지하고 있습니다.
    </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>