<details>
    <summary>요약 내용</summary>
    추가 정보나 세부 내용
</details>
브라우저에서 실제 표시된 모습 '요약 내용'이라는 텍스트를 클릭하여 세부 정보를 보거나 숨길 수 있습니다.
<details>
    <summary>요약 내용</summary>
    추가 정보나 세부 내용
</details>
summary::-webkit-details-marker { /* Safari 브라우저용 사용자 정의 스타일 */
    display: none;
}
summary {
    list-style-type: none; /* 그 외의 브라우저용 사용자 정의 스타일 */
}

/* 브라우저 호환을 위해서는 위 두 사용자 정의 스타일을 모두 지정해야 함 */
브라우저에서 실제 표시된 모습
summary::-webkit-details-marker { /* Safari 브라우저용 사용자 정의 스타일 */
    display: none;
}
summary {
    display: block; /* 그 외의 브라우저용 사용자 정의 스타일 */
}

/* 브라우저 호환을 위해서는 위 두 사용자 정의 스타일을 모두 지정해야 함 */
브라우저에서 실제 표시된 모습

마지막 업데이트 정보: 2023-10-31

summary 태그의 display list-item 브라우저 호환성
태그와 속성 값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<summary> 12 79 49 6
display: list-item 89 89 49 지원하지 않음

caniuse.com에서 더 자세한 정보를 확인해 보세요.

<details>
    <summary>요약 내용</summary>
    추가 정보나 세부 내용
</details>
summary::-webkit-details-marker { /* Safari 브라우저용 사용자 정의 스타일 */
    display: none;
}
summary {
    display: block; /* 그 외의 브라우저용 사용자 정의 스타일 */
}
/* 브라우저 호환을 위해서는 위 두 사용자 정의 스타일을 모두 지정해야 함 */

/* 여기서부터는 details 화살표(marker) 커스텀으로 꾸미기  */
summary {
    position: relative;
    padding-left: 1.2em;
    cursor: pointer;
}
summary::before {
    content: "";
    position: absolute;
    border-top: 0.5em solid transparent;
    border-bottom: 0.5em solid transparent;
    border-left: 0.75em solid yellowgreen;
    top: 0.2em;
    left: 0;
    transition: .25s transform;
}
details[open] summary:before {
    transform: rotateZ(90deg);
}
브라우저에서 실제 표시된 모습 '요약 내용'이라는 텍스트를 클릭해 보세요.
<details>
    <summary>짧은 내용의 공지사항 제목입니다.</summary>
    <p>
        "팀 버너스리"에 의해 1989년 고안된
        월드 와이드 웹(World Wide Web, WWW, W3)의
        하이퍼텍스트 시스템을 우리는 간단히 "웹"이라 부릅니다.
        현재 우리의 일상에서 대중화된 것 이상으로 절대적 위치를 차지하고 있습니다.
    </p>
</details>
<details>
    <summary>짧은 내용의 공지사항 제목입니다.</summary>
    <p>
        "팀 버너스리"에 의해 1989년 고안된
        월드 와이드 웹(World Wide Web, WWW, W3)의
        하이퍼텍스트 시스템을 우리는 간단히 "웹"이라 부릅니다.
        현재 우리의 일상에서 대중화된 것 이상으로 절대적 위치를 차지하고 있습니다.
    </p>
</details>
<details>
    <summary>짧은 내용의 공지사항 제목입니다.</summary>
    <p>
        "팀 버너스리"에 의해 1989년 고안된
        월드 와이드 웹(World Wide Web, WWW, W3)의
        하이퍼텍스트 시스템을 우리는 간단히 "웹"이라 부릅니다.
        현재 우리의 일상에서 대중화된 것 이상으로 절대적 위치를 차지하고 있습니다.
    </p>
</details>
details {
    padding: 0 2rem;
    background-color: #f1f9eb;
    border: 1px solid yellowgreen;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}
details:last-child {
    margin-bottom: 0;
}
summary::-webkit-details-marker {
    display: none;
}
summary {
    display: block;
    padding: 2rem 3rem 2rem 0;
    font-weight: 600;
    cursor: pointer;
    position: relative;
}
summary::before,
summary::after {
    content: "";
    position: absolute;
    width: 1rem;
    height: 2px;
    background-color: #222;
    right: 1rem;
    top: 2.5rem;
}
summary::after {
    transform: rotateZ(90deg);
}
details p {
    padding-bottom: 2rem;
}
details[open] summary::after {
    display: none;
}
브라우저에서 실제 표시된 모습
<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>
브라우저에서 실제 표시된 모습