collapse

by johnny890118

HTML

<body>
  <div class="container">
    <button class="btn">
      Q：如何辦理退換貨？
    </button>
    <div class="content">
      <p>
        A：請參考退貨服務頁面。
      </p>
    </div>

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

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

    <button class="btn">
      Q：發票遺失是否仍能辦理退換貨？
    </button>
    <div class="content">
      <p>
        A：很抱歉，需要有發票才能辦理退換貨。
      </p>
    </div>

    <button class="btn">
      Q：什麼情況無法辦理退換貨？
    </button>
    <div class="content">
      <p>
        A：超過7天退貨期限，就無法辦理。
      </p>
    </div>
  </div>
</body>

CSS

* {
  margin: 0;
  padding: 0;
  font-family: Arial , sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #eee;
}

.container {
  width: 80%;
  margin: 50px auto;
}

.btn {
  width: 100%;
  text-align: start;
  padding: 18px 15px;
  border: none;
  background-color: #1A5F7A;
  color: white;
  font-size: 1rem;
}

.active,
.btn:hover {
  background-color: #217799;
  cursor: pointer;
}

p {
  padding: 16px;
  background-color: white;
}

.btn::after {
  content: "\002B";
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active::after {
  content: "\2212";
}

.content{
	border-top: none;
	text-align: justify;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
}

JavaScript

let btn = document.querySelectorAll(".btn");

for (let question of btn) {
  question.onclick = myfunction = function() {
    question.classList.toggle("active");
    let content = this.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  }
}