JSFiddle - React, Tailwind, and code Playground

HTML

<div class="frame_div">

        <button class="btn" onclick="collapse()">Q : 如何辦理退換貨？</button>
        <div class="content     content_div0">A : 請參考退貨服務頁面。</div>

        <button class="btn" onclick="collapse()">Q : 退款方式及退款時間？</button>
        <div class="content     content_div1">A : 約7-8個工作天完成退款作業。</div>

        <button class="btn" onclick="collapse()">Q : 未退回的退款，是否可直接折抵新訂單？</button>
        <div class="content     content_div2">A : 很抱歉，重新訂購時無法直接於新訂單扣抵。</div>

        <button class="btn" onclick="collapse()">Q : 發票遺失是否仍能辦理退換貨？</button>
        <div class="content     content_div3">A : 很抱歉，需要有發票才能辦理退換貨。</div>

        <button class="btn" onclick="collapse()">Q : 什麼情況無法辦理退換貨？</button>
        <div class="content     content_div4">A : 超過7天退貨期限，就無法辦理。</div>

    </div>

CSS

.frame_div{

    background: url("https://thumb.photo-ac.com/74/7492504316414696f9623bc68360dec5_t.jpeg") center center no-repeat;

    width: 500px;

    font-family: Comic Sans MS , Microsoft JhengHei;

    /*border: 1px solid red;*/
}

.btn{
    width: 100%;
    height: 50px;

    text-align: left;
    padding-left: 15px;
    font-family: Comic Sans MS , Microsoft JhengHei;
    font-size: 20px;
    font-weight: bold;

    border: 0;

    background-color: rgba(255, 141, 141, 0.3);
    backdrop-filter: blur(5px);

}
.active,.btn:hover{
    background-color: rgba(255, 84, 84, 0.5);
}
.btn:after {    /*在btn後面加上東西*/
    content: '\002B';    /* '+'的符號  */
    font-weight: bold;
    float: right;
    margin-right: 5px;
}
.active:after {
    content: "\2212";    /* '-'的符號 */
}


.content{
    width: 100% - 10px;
    height: 50px;

    line-height: 50px;
    padding-left: 15px;
    font-size: 20px;
    font-weight: bold;

    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;

    background-color: rgba(153, 252, 166, 0.5);
    backdrop-filter: blur(5px);


    /*border: 1px solid green;*/
}

JavaScript

function collapse(){

    content_div = event.target.nextElementSibling;

    event.target.classList.toggle("active");        //新增 active class

    //console.log(btn);
    //console.log(event.target.nextElementSibling.className);

    if (content_div.style.maxHeight != ""){
    	console.log("進到1");
        content_div.style.maxHeight = null;
    } 
    else if(content_div.style.maxHeight == ""){
        console.log("進到2");
        content_div.style.maxHeight = content_div.scrollHeight + "px";
    }

}