html,css手风琴

 HTML部分

 <details>
        <summary>
            <span class="summary-title">带有自定义箭头的Details元素</span>
            <div class="summary-chevron-up">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="feather feather-chevron-down">
                    <polyline points="6 9 12 15 18 9"></polyline>
                </svg>
            </div>
        </summary>

        <div class="summary-content">
            请注意，否则面对我爪子的愤怒请注意，要么面对愤怒
            我的爪子，假装不是邪恶的猫去统治世界，一直想要食物。吃主人的食物
            玩毛线球，喵叫，然后走开，然后打嗝
            我的皮球真的把房间挤得水泄不通。抱抱不抱抱爱抓抓猫
        </div>
        <div class="summary-chevron-down">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="feather feather-chevron-up">
                <polyline points="18 15 12 9 6 15"></polyline>
            </svg>
    </details>

css部分

<style>
    @import url("https://fonts.googleapis.com/css?family=Roboto:300,400&display=swap");

    html {
        box-sizing: border-box;
        font-size: 18px;
        font-family: "Roboto", sans-serif;
    }

    body {
        background: #edf2f7;
        color: #4a5568;
        height: 100%;
    }

    *,
    *:before,
    *:after {
        box-sizing: inherit;
    }

    details {
        font-size: 1rem;
        margin: 7em auto;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
            0 10px 10px -5px rgba(0, 0, 0, 0.04);
        width: 100%;
        background: #ffffff;
        border-radius: 8px;
        position: relative;
        width: 500px;

        .summary-title {
            user-select: none;
        }

        &:hover {
            cursor: pointer;
        }

        .summary-content {
            border-top: 1px solid #e2e8f0;
            cursor: default;
            padding: 1em;
            font-weight: 300;
            line-height: 1.5;
        }

        summary {
            list-style: none;
            padding: 1em;

            &:focus {
                outline: none;
            }

            &:hover .summary-chevron-up svg {
                opacity: 1;
            }
        }

        .summary-chevron-up svg {
            opacity: 0.5;
        }

        .summary-chevron-up,
        .summary-chevron-down {
            pointer-events: none;
            position: absolute;
            top: 0.75em;
            right: 1em;
            background: #ffffff;

            svg {
                display: block;
            }
        }

        summary::-webkit-details-marker {
            display: none;
        }
    }
</style>