[Vanilla JS] 버튼을 클릭하면 늘어나는 아코디언 메뉴

💡 목표

버튼을 클릭하면 아래로 길어지는 아코디언 메뉴 구현

 

📌 HTML

<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>

 

📌 CSS

- transition은 height: auto에는 먹히지 않는다. max-height를 활용하는 방법으로 수정 가능하다.

/* 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); }

 

📌 JavaScript

document.querySelectorAll('.accordionBtn').forEach(btn => {
    btn.addEventListener('click', () => {
        const accordionItem = btn.parentElement;

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

 

💛 결과물

 

 

Html 아이콘 제작자: Freepik - Flaticon
Css 아이콘 제작자: Freepik - Flaticon
자바 스크립트 아이콘 제작자: Rmpp - Flaticon

11,072종의 무료 html 아이콘