클릭시 컨텐츠?div 펼쳐지는 방법..

https://gis.forestdata.kr/ 여기 시각화 탭 누르면 보이는 메뉴들처럼 클릭시 옆으로 div가 보였으면 좋겠어요.. 펼쳐지는? 열리는? 느낌으로.. 

      //         //-------사이드바 슬라이드-------//
      // const fourthListItem = document.querySelector('.warning-sub #fourth');
      // const contentsWrap = document.getElementById('contentswrap');
      // const navWrap = document.getElementById('navwrap');
      // const navWrapWidth = navWrap.offsetWidth;
      // const closeBtn2 = document.querySelector('.closebtn2');

      
      // contentsWrap.style.transform = `translateX(-${0}px)`;
      // contentsWrap.style.opacity = '0';

      // fourthListItem.addEventListener('click', function() {
         
      //    contentsWrap.style.transition = 'transform 0.3s ease-in-out, opacity 0.3s ease-in-out';
      //    contentsWrap.style.transform = 'translateX(0)';
      //    contentsWrap.style.opacity = '1';

         
      //    navWrap.style.transition = 'transform 0.3s ease-in-out';
      //    navWrap.style.transform = `translateX(-${0}px)`;
      // });


      //   //---------사이드바 닫힘 버튼--------//
      // closeBtn2.addEventListener('click', function() {
        
      //    contentsWrap.style.transition = 'transform 0.3s ease-in-out, opacity 0.3s ease-in-out';
      //    contentsWrap.style.transform = `translateX(-${0}px)`;
      //    contentsWrap.style.opacity = '0';

         
      //    navWrap.style.transition = 'transform 0.3s ease-in-out';
      //    navWrap.style.transform = 'translateX(0)';
      // });

이게 지금 제 스크립트 코드입니다.. ㅠㅠ 지금은 약간 디졸브처럼 페이드인아웃 되는데 그게아니라 옆으로 딱!팍!펼쳐졌으면 좋겠어요ㅠㅠㅠ