JSFiddle - React, Tailwind, and code Playground

by birdie2019

HTML

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

SCSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    letter-spacing: 1px;
}

body {
  background-color: #eee;
}

.container {
    width: 500px;
    margin: 100px auto;
    box-shadow: 0 0 8px rgba(161, 161, 161, 0.3);
}

.question{
  padding: 10px;
  cursor: pointer;
  background-color: rgb(59, 120, 121);
  color: #fff;
  font-size: 16px;
  position: relative;
  &::after {
      content: '';
      width: 6px;
      height: 6px;
      border-top: 2px solid #fff;
      border-right: 2px solid #fff;
      position: absolute;
      top: 17px;
      right: 20px;
      transform: rotate(135deg);
      transition: all 0.5s;
  }
  &:hover {
      background-color: rgb(108, 155, 155);
  }
}

.arrow-rotate {
  &::after {
    transform: rotate(-45deg);
  }
}

.answer{
  max-height: 0;
  padding: 0 10px;
  overflow: hidden;
  border: 1px solid rgba(92, 144, 145, 0.3);
  background-color: #fff;
  font-size: 14px;
  transition: max-height 0.5s ease-out;
  p {
      margin: 10px 0;
      color: #777;
  }
}

JavaScript

var questions = document.querySelectorAll('.question');
var answers = document.querySelectorAll('.answer');
for (var question of questions) {
    question.onclick = toggle;
}
function toggle(e) {
    var answer = e.target.nextElementSibling;
    if (!answer.style.maxHeight) {
        answer.style.maxHeight = answer.scrollHeight + 'px';
        e.target.classList.toggle('arrow-rotate');
    } else {
        answer.style.maxHeight = '';
        e.target.classList.toggle('arrow-rotate');
    }
}