ㅠㅠ클릭시 슬라이드로 div보이게..하는방법 도와주세요.

https://gis.forestdata.kr/ 시각화 탭의 메뉴를 누르면 옆으로 설명창이 뜨는데 저도 저렇게 설명창 뜨게 하고 싶어요.... 

      //-------사이드바 슬라이드-------//

      const firstListItem = document.querySelector('.warning-sub li:first-child');

      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';

      firstListItem.addEventListener('click', function() {

         // contentsWrap를 부드럽게 나타나도록 변경

         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를 숨김

         navWrap.style.transition = 'transform 0.3s ease-in-out';

         navWrap.style.transform = `translateX(-${0}px)`;

      });

      //---------사이드바 닫힘 버튼--------//

      closeBtn2.addEventListener('click', function() {

         // contentsWrap를 숨김

         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를 원래 위치로 되돌림

         navWrap.style.transition = 'transform 0.3s ease-in-out';

         navWrap.style.transform = 'translateX(0)';

      });

이건 제 스크립트 코든데 저렇게 허면 옆으로 열리는?느낌보다는 디졸브되는 것 처럼 페이드인아웃되듯 보여서요..그리구 클릭하고 설명창 보이고 나면 서브메뉴도 다시 올라가는데 고정 됐으면 좋겠어요 흑