JSFiddle - React, Tailwind, and code Playground

by wimp9487

HTML

<h1>FAQ</h1>
<hr />
<div class='container'>
  <ul>
    <li>
      <div class="question">如何辦理退換貨？</div>
      <div class="answer">請參考退貨服務頁面。</div>
    </li>
    <li>
      <div class="question">退款方式及退款時間？</div>
      <div class="answer">約7-8個工作天完成退款作業。</div>
    </li>
    <li>
      <div class="question">未退回的退款，是否可直接折抵新訂單？</div>
      <div class="answer">很抱歉，重新訂購時無法直接於新訂單扣抵。</div>
    </li>
    <li>
      <div class="question">發票遺失是否仍能辦理退換貨？</div>
      <div class="answer">很抱歉，需要有發票才能辦理退換貨。</div>
    </li>
    <li>
      <div class="question">什麼情況無法辦理退換貨？</div>
      <div class="answer">超過7天退貨期限，就無法辦理。</div>
    </li>
  </ul>
</div>

CSS

* {
  box-sizing: border-box;
  list-style: none;
}
h1 {
  font-size: 40px;
  text-align: center;
  padding: 10px 0;
  font-weight: bold;
}
.container {
  position: relative;
  right: 50px;   
  font-size: 30px;
}
.question {
 color: white;
 font-weight: bold;
 width: 750px;
 background-color: rgb(0, 255, 255);
 border-top: 1px solid white;
}
.question::before {
  content: 'Q: ';
}
.question:hover {
  background-color: rgb(125, 125, 255);
}
.question::after {
  content: '+';
  position: absolute;
  right: -45px;
  transition: all 0.5s;
}
.answer {
  max-height: 0;
  padding: 0 30px;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.answer::before {
  content: 'A: ';  
}
.plus-rotate::after {
  transform: rotate(-45deg);
}

JavaScript

const allQuestion = document.querySelectorAll('.question');
const allAnswer = document.querySelectorAll('.answer');
const toggle = (e) => {
   const answer = e.target.nextElementSibling;
    if (!answer.style.maxHeight) {
        answer.style.maxHeight = answer.scrollHeight + 'px';
        e.target.classList.toggle('plus-rotate');
    } else {
        answer.style.maxHeight = '';
        e.target.classList.toggle('plus-rotate');
    }
}
for (let question of allQuestion) {
    question.onclick = toggle;
}