JS 자바스크립트 collapse banner 제작하는 법

HTML

    <nav>
        <ul class='container d-flex justify-content-evenly align-content-center mx-auto' id='main-Categori' style='padding: 0;'>
            <div class='categori-box'>
                <a href="#" style='text-decoration: none;'><li class='shown-categori' style='list-style: none; font-size: 20px;'>주식뉴스</li></a>
                <a href="#" style='text-decoration: none;' ><li class='hiddenContent' style='list-style: none; font-size: 20px;'>이번달뉴스</li></a>
                <a href="#" style='text-decoration: none;' ><li class='hiddenContent' style='list-style: none; font-size: 20px;'>주식뉴스</li></a>
            </div>
            <div class='categori-box'>
                <a href="#" style='text-decoration: none;'><li class='shown-categori' style='list-style: none; font-size: 20px'>코인뉴스</li></a>
                <a href="#" style='text-decoration: none;' ><li class='hiddenContent' style='list-style: none; font-size: 20px;'>주식뉴스</li></a>
                <a href="#" style='text-decoration: none;' ><li class='hiddenContent' style='list-style: none; font-size: 20px;'>주식뉴스</li></a>
            </div>
            <div class='categori-box'>
                <a href="#" style='text-decoration: none;'><li class='shown-categori' style='list-style: none; font-size: 20px;'>주식투자복기</li></a>
                <a href="#" style='text-decoration: none;' ><li class='hiddenContent' style='list-style: none; font-size: 20px;'>주식뉴스</li></a>
                <a href="#" style='text-decoration: none;' ><li class='hiddenContent' style='list-style: none; font-size: 20px;'>주식뉴스</li></a>
            </div>
        </ul>
    </nav>

 

JS

각 값을 class 별로 받아와서 CSS 스타일 변경

for(var i = 0; i<roww.length; i++){
    roww[i].addEventListener('mouseover', function(){

        var hide = document.getElementsByClassName('hiddenContent');
        for(var j = 0; j<hide.length; j++){
            // console.log(hide[j].stlye.maxHeight);
            if(hide[j].style.maxHeight != 0){
                hide[j].style.maxHeight = null;
                // 0이 아니라 null로 지정해서 공백으로 넣어줘야 다음에 값 재배치 가능
            }
            else{
                hide[j].style.maxHeight = '100px';
            }
        }
    });
    
    roww[i].addEventListener('mouseout', function(){
        
        var hide = document.getElementsByClassName('hiddenContent');
        for(var j = 0; j<hide.length; j++){
            hide[j].style.maxHeight = null;
        }
    });
}

 

CSS

 

.shown-categori {
  transition-duration: 0.7s;
}

.hiddenContent {
  max-height: 0;
  overflow: hidden;
  /* 넘치는 텍스트 숨김 */
  transition-duration: 0.7s;
}