Class 3-5

by kushmuffin

HTML

<section>
  <h2>F&Q</h2>
  <div class="group">
    <div class="title">如何辦理退換貨？</div>
    <div class="content">
      <p>請參考退貨服務頁面。</p>
    </div>
  </div>

  <div class="group">
    <div class="title">退款方式及退款時間？</div>
    <div class="content">
      <p>約7-8個工作天完成退款作業。</p>
    </div>
  </div>

  <div class="group">
    <div class="title">未退回的退款，是否可直接折抵新訂單？</div>
    <div class="content">
      <p>很抱歉，重新訂購時無法直接於新訂單扣抵。</p>
    </div>
  </div>
  
  <div class="group">
    <div class="title">發票遺失是否仍能辦理退換貨？</div>
    <div class="content">
      <p>很抱歉，需要有發票才能辦理退換貨。</p>
    </div>
  </div>
  
  <div class="group">
    <div class="title">什麼情況無法辦理退換貨？</div>
    <div class="content">
      <p>超過7天退貨期限，就無法辦理。</p>
    </div>
  </div>
</section>

CSS

*{
  box-sizing: border-box;
}

section{
  display: flex;
  flex-direction: column;
  gap: 5px;
}

h2{
  text-align: center;
}

.group{
  /* padding: 1rem; */
  background-color: lightgray;
  position: relative;
  &:hover {
    background-color: gray;
  }
}

.title{
  padding: 10px;

  &::before {
    content: 'Q: ';
    font-weight: bold;
  }

  &::after {
    content: '+';
    font-weight: bold;
    font-size: 20px;
    right: 20px;
    position: absolute;
    transition: transform 0.5s;
    
  }
}

.active{
  background-color: gray;
  &::after{
    transform: rotate(135deg);
  }
}

.content{
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease-out;
}

.slideDown{
  height: 40px;
}

p{
  margin: 10px 30px;
  font-size: 14px;
}

JavaScript

let collapse = document.querySelectorAll('.title');
for(let div of collapse){
	div.onclick = sliedUp;
}

function sliedUp(){
	let title = event.target.closest(".title");
	let content = title.nextElementSibling;
  content.classList.toggle('slideDown');
  title.classList.toggle('active');
}