아코디언 샘플

자바스크립트 아코디언 샘플입니다.

<ul>
    <li class="">
      <button class="button">menu1
        <span><img src="images/arrow2.png" alt=""></span>
      </button>
      <p id="menu1" class="content">Lorem ipsum dolore</p>  
    </li>
    <li>
      <button class="button">menu2
        <span><img src="images/arrow2.png" alt=""></span>
      </button>
      <p id="menu2" class="content">Lorem ipsum dolor et.</p>  
    </li>
  </ul>

 const buttons = document.querySelectorAll('.button');
  const imgs = document.querySelectorAll('span > img');

  buttons.forEach(function(button, index) {
    button.addEventListener('click', function() {
      this.parentNode.classList.toggle('on');

      if(this.parentNode.classList.contains('on')){
        this.querySelector('img').setAttribute('src','images/arrow1.png');
      }else{
        this.querySelector('img').setAttribute('src','images/arrow2.png')
      }
    });
  });

버튼과 화살표 이미지를 변수로잡고,
반복문을 돌려 toggle 기능으로 클래스를 더하고 제거를 하며
그에따른 컨텐츠 보이기 숨김 동작과, 우측 화살표이미지를 setAttribute로
변경 하였습니다.