JSFiddle - React, Tailwind, and code Playground

by superyngo

HTML

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

CSS

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
picture,
svg,
video {
  display: block;
}

input,
textarea,
button,
select {
  font: inherit;
}

/* use above or use this more radical*/
html,
body {
  margin: 0;
  padding: 0;
}

html {
  color-scheme: dark light;
}

body {
  min-height: 100svh;
}

.container {
  border: 2px solid black;
  border-radius: 10px;
  width: 100svw;
}

button.accordion {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  font-size: 15px;
}

button.accordion.active,
button.accordion:hover {
  background-color: #555;
}

button.accordion::after {
  content: "+";
  color: white;
  font-weight: bold;
  margin-left: 5px;
  float: right;
}

button.accordion.active::after {
  content: "-";
  color: white;
  font-weight: bold;
  margin-left: 5px;
  float: right;
}

div.panel {
  padding: 0 18px;
  background-color: #f1f1f1;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  color: black;
}

JavaScript

const buttons = document.querySelectorAll("button.accordion");
for (let button of buttons) {
  button.onclick = () => {
    button.classList.toggle("active");
    let panel = button.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  };
}