JSFiddle - React, Tailwind, and code Playground

by evon0306

HTML

<div class="QA">
   <div class="Q">
      <div class="heading">如何辦理退換貨？</div>
      <div class="An ">請參考退貨服務頁面。</div>
   </div>

   <div class="Q">
      <div class="heading">退款方式及退款時間？</div>
      <div class="An">約7-8個工作天完成退款作業。</div>
   </div>

   <div class="Q">
      <div class="heading">未退回的退款，是否可直接折抵新訂單？</div>
      <div class="An">很抱歉，重新訂購時無法直接於新訂單扣抵。</div>
   </div>

   <div class="Q">
      <div class="heading">發票遺失是否仍能辦理退換貨？</div>
      <div class="An">很抱歉，需要有發票才能辦理退換貨。</div>
   </div>

   <div class="Q">
      <div class="heading">什麼情況無法辦理退換貨？</div>
      <div class="An">超過7天退貨期限，就無法辦理。</div>
   </div>
</div>

SCSS

*{
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}
.QA{
   width: 70vw;
   margin: auto;
   .Q{
      background-color: rgb(209, 209, 209);
      border-radius: 7px;
      margin: 0.5rem;
      padding: 0.5rem;
      position: relative;
      .heading{
         font-size: 1.2rem;
         padding:0 1rem;
         padding-bottom: 0.2rem;
         &:hover {
            transition: all 0.3s;
            color: #00838f;
         }
         &::before {
            font-family: serif;
            font-size: 1.5em;
            padding-right: 0.5em;
            content: 'Q';
         }
         &::after {
            content: "\002B";
            font-weight: bold;
            font-size: 1.7rem;
            position: absolute;
            right: 10px;
            top: 10px;
            transition: transform 0.4s;
         }
      }
      .An{
         padding: 0;
         margin-top: 0.5rem;
         background-color: white;
         border-radius: 5px;
         position: relative;
         height: 0;
         overflow: hidden;
         transition: height , padding .5s ;
         color: rgb(116, 42, 42);
      }
   }
}
.open{
   &::after{
   transform: rotate(45deg);
   }
}

.animation {
   transition: height ,padding 0.3s;
}

.SlideDown {
   height: auto !important;
   padding: 1rem 2.5rem !important;
}

JavaScript

let question = document.querySelectorAll(".heading");
for (let label of question){
   label.onclick = open;
}

function open(){
   let Q = event.target.closest(".heading");
   let A = Q.nextElementSibling;
   A.classList.toggle('SlideDown');
   Q.classList.toggle('open');
}