collapse UI

by dfg312546

HTML

<div class="container">
  <div class="titleStyle"><span>F</span> <span>A</span> <span>Q</span></div>
</div>

<hr>

<ul>
  <div class="QAcontainer">
    <li class="questionStyle">如何辦理退換貨？</li>
      <div class="answerStyle">請參考退貨服務頁面。</div>
  </div>
  
  <div class="QAcontainer">    
    <li class="questionStyle">退款方式及退款時間？</li>
      <div class="answerStyle">約7-8個工作天完成退款作業。</div>
  </div>

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

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

  <div class="QAcontainer">
    <li class="questionStyle">什麼情況無法辦理退換貨？</li>
      <div class="answerStyle">超過7天退貨期限，就無法辦理。</div>
  </div>
</ul>

CSS

body {
  background-color:#FFFFE3;
}

.container {
  text-align: center;
}

.titleStyle {
  color:red;
  font-size:50px;
  font-weight:bold;
  font-family:Arial;
  display: inline-block;
}

.QAcontainer {
  border-style:dashed;
  border-radius:7px;
  border-color:#A52A2A;
  margin-bottom:15px;
  margin-right:30px;
}

.questionStyle {
  color:#A52A2A;
  cursor: pointer;
  padding-left:15px;
  padding-top:10px;
  padding-bottom:5px;
  line-height: 2;
}

.answerStyle {
  line-height: 2;
  padding-left:15px;
  padding-bottom:5px;
  color:#004D99;
  
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.7s ease, opacity 0.7s ease;
}
.answerStyle.show {
  max-height: 1000px;
  opacity: 1;
}

JavaScript

const questions = document.querySelectorAll(".questionStyle");

questions.forEach(question => {
  question.addEventListener("click", () => {
    const answer = question.nextElementSibling;
    answer.classList.toggle("show");
  });
});