flex panels

JAVASCRIPT

    const panels = document.querySelectorAll('.panel');

    function toggleOpen() {
      this.classList.toggle('open'); //토글
    }

    function toggleActive(e) {
      if (e.propertyName.includes('flex')) { // flex라는 속성값이 정의 되 있는 이벤트 타겟에
        this.classList.toggle('open-active'); // open-active 토글을 하도록 구현
      }
    }

    panels.forEach(panel => panel.addEventListener('click', toggleOpen));
    // panel 클래스를 가진 요소를 클릭하면 toggleOpen 함수가 작동도록 구현
    panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
    // toggleOpen 으로 인한 transition이 끝나면 toggleActive 함수가 작동하도록 구

HTML

CSS