JavaScript로 slideDown, slideUp 구현해보기

jQuery로 `slideDown()`, `slideUp()` 으로 편하게 작업했었는데 이번에는 자바스크립트로 스크립트를 짜보았다.

 

`accSlide()` : 해당 버튼 클릭 시 자신만 닫힘

`accOtherSlide()` : 해당 버튼 클릭 시 다른 버튼 닫힘

 

<div class="wrap">
    <h2>해당 버튼만 toggle</h2>
    <div class="acc">
        <button type="button" class="acc-tit">버튼1</button>
        <div class="acc-cont">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti laudantium consequatur cumque repellendus, sit ducimus iste doloremque accusantium autem. Itaque, voluptatum. Dolorum ratione laborum aliquid ab ullam aut nobis eaque?
        </dlv>
    </div>
    <div class="acc">
        <button type="button" class="acc-tit">버튼2</button>
        <div class="acc-cont">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti laudantium consequatur cumque repellendus, sit ducimus iste doloremque accusantium autem. Itaque, voluptatum. Dolorum ratione laborum aliquid ab ullam aut nobis eaque?
             Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti laudantium consequatur cumque repellendus, sit ducimus iste doloremque accusantium autem. Itaque, voluptatum. Dolorum ratione laborum aliquid ab ullam aut nobis eaque?
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti laudantium consequatur cumque repellendus, sit ducimus iste doloremque accusantium autem. Itaque, voluptatum. Dolorum ratione laborum aliquid ab ullam aut nobis eaque?
        </dlv>
    </div>
</div>

<div class="wrap-other">
    <h2>버튼 클릭 시 열려있는 아코디언 닫힘</h2>
    <div class="acc">
        <button type="button" class="acc-tit">버튼1</button>
        <div class="acc-cont">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti laudantium consequatur cumque repellendus, sit ducimus iste doloremque accusantium autem. Itaque, voluptatum. Dolorum ratione laborum aliquid ab ullam aut nobis eaque?</dlv>
    </div>
    <div class="acc">
        <button type="button" class="acc-tit">버튼2</button>
        <div class="acc-cont">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti laudantium consequatur cumque repellendus, sit ducimus iste doloremque accusantium autem. Itaque, voluptatum. Dolorum ratione laborum aliquid ab ullam aut nobis eaque?
             Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti laudantium consequatur cumque repellendus, sit ducimus iste doloremque accusantium autem. Itaque, voluptatum. Dolorum ratione laborum aliquid ab ullam aut nobis eaque?
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti laudantium consequatur cumque repellendus, sit ducimus iste doloremque accusantium autem. Itaque, voluptatum. Dolorum ratione laborum aliquid ab ullam aut nobis eaque?
        </dlv>
    </div>
</div>

.acc-tit {display:block; width:100%;appearance:none;margin-top:10px;}
.acc-tit.active {color:red;}
.acc-cont {max-height:0; overflow:hidden; transition:max-height 0.4s ease;}

accSlide();
 function accSlide() {
 	const accBtn = document.querySelectorAll('.wrap .acc-tit');
 
     accBtn.forEach(button => {
     	button.addEventListener('click', function() {
        	// 클릭된 버튼의 다음 요소 선택
            const cont = this.nextElementSibling; // acc-cont
            if(cont.style.maxHeight) {
            	// 슬라이드 업
                cont.style.maxHeight = null;
            } else {
            	// 슬라이드 다운
                cont.style.maxHeight = cont.scrollHeight + 'px';
            }
            // 버튼의 활성화
            this.classList.toggle('active');
        })
     })
 }
 
accOtherSlide();
 function accOtherSlide() {
 	const accBtn2 = document.querySelectorAll('.wrap-other .acc-tit');
    
     accBtn2.forEach(button => {
     	button.addEventListener('click', function() {
            const cont2 = this.nextElementSibling; // acc-cont
            
            // 다른 열린 아코디언 항목 닫기
            accBtn2.forEach(otherButton => {
            	if(otherButton !== this) {
                	const otherCont = otherButton.nextElementSibling;
                	otherCont.style.maxHeight = null;
                    otherButton.classList.remove('active');
                }
            });
            
            // 클릭된 아코디언 항목 토글
            if(cont.style.maxHeight) {
                cont2.style.maxHeight = null;
                this.classList.remove('active');
            } else {
                cont2.style.maxHeight = cont2.scrollHeight + 'px';
                this.classList.add('active');
            }
        })
     })
 }