<ul class="accordionMenu">
  <li>
    <button class="accordionBtn">Q. 사용 시간은?</button>
    <div class="content">
      <p>A. 60분 사용 가능합니다.</p>
    </div>
  </li>
  <li>
    <button class="accordionBtn">Q. 사용 방법은?</button>
    <div class="content">
      <p>A. 부착하여 사용하시면 됩니다.</p>
    </div>
  </li>
  <li>
    <button class="accordionBtn">Q. 몇 회 사용 가능?</button>
    <div class="content">
      <p>A. 1일 1회 사용 가능합니다.</p>
    </div>
  </li>
</ul>
/* reset */
* { margin: 0; padding: 0; }
button { display: block; border: none; }

/* 기본 세팅 */
.accordionMenu { width: 100vw; height: auto; }
.accordionMenu li { margin-bottom: 10px; }
.accordionMenu li .content p,
.accordionMenu li .accordionBtn { width: 70%; margin: 0 auto; padding: 16px; text-align: left; font-size: 14px; background: #ffe3e3; box-sizing: border-box; cursor: pointer; }

/* 컨텐츠 */
.accordionMenu li .content { height: 0; overflow: hidden; transition: height 0.3s ease; }

/* + 버튼 */
.accordionMenu li .accordionBtn { position: relative; }
.accordionMenu li .accordionBtn::before,
.accordionMenu li .accordionBtn::after { content: ''; position: absolute; top: 25px; right: 10px; display: block; width: 16px; height: 2px; background: #1a1a1a; }
.accordionMenu li .accordionBtn::after { transform: rotate(90deg); transition: transform 0.3s ease; }

/* 활성화 */
.accordionMenu li.active .content { height: 50px; }
.accordionMenu li.active .accordionBtn::after { transform: rotate(0deg); }
document.querySelectorAll('.accordionBtn').forEach(btn => {
    btn.addEventListener('click', () => {
        const accordionItem = btn.parentElement;

        accordionItem.classList.toggle('active');
    });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.