how to resize items inside collapsible custom bar

Question

I am learning HTML,CSS & Java script. during my learning path. i created custom menu. which expand and close using a button. my problem is when the menu closes, the inside items are not totally disappear like below:

while menu is open.

while menu is closed.

my code as below:

 function ExpandMenu() { var ButtonExpandMenuWidth = document.getElementById("TopBarExpandMenu"), style = window.getComputedStyle(ButtonExpandMenuWidth), top = style.getPropertyValue('width'); if (top === "0px") { document.querySelector('#TopBarExpandMenu').style.width = "120px" } else if (top === "120px") { document.querySelector('#TopBarExpandMenu').style.width = "0px" } }

 #mainBody { height: 600px; min-height: 600px; width: 1200px%; margin: 0; padding: 0; box-sizing: border-box; position: relative; } /* ------------------------------------------ */ #sideBar { transition: 500ms ease-in-out; height: 100%; width: 150px; position: fixed; left: 0; background: #212529; z-index: 100; border-right: 1px solid; border-color: cyan; } /* ------------------------------------------ */ #StatusBar { background: #30FF83; width: 100%; height: 1px; position: fixed; max-height: 3px; z-index: 101; } /* ------------------------------------------ */ #sideBarRows { position: fixed; top: 60px; width: inherit; z-index: 50; } /* ------------------------------------------ */ #download_button { background: transparent; width: inherit; text-align: left; border: none; height: 33px; top: -8px; position: relative; color: white; font-size: 12px; } #download_button_frame { height: 50px; position: relative; border-left: 2px solid var(--red); padding-top: 15px; margin-right: 1%; } /* ------------------------------------------ */ #ManualDeploy_Frame { height: 50px; position: relative; border-left: 2px solid var(--red); top: 20px; z-index: 50; } #ManualDeploy_Button { border: 0px; width: auto; height: 42px; position: relative; text-align: left; top: 4px; font-size: 12px; background-color: transparent; margin-left: 1px; } /* ------------------------------------------ */.menuButton { background: transparent; background: url("menu.png") center / contain, rgba(181, 20, 20, 0); width: 40px; height: 40px; position: fixed; left: 1%; border: none; top: 2%; transition: 500ms ease-in-out; -webkit-app-region: no-drag; transform: rotate(0deg); z-index: 1000; -webkit-app-region: no-drag; } #menuButton:focus { background: url("menu.png") left / contain no-repeat transparent; outline: 0px; } #menuButton:hover { background: url("menu.png") left / contain no-repeat transparent; } /* ------------------------------------------ */ /* ------------------------------------------ */.DownloadPage_Frame { display: flex; background: #212529; position: fixed; z-index: 99; height: 100%; width: 100%; right: 0%; top: 0%; } /* ------------------------------------------ */.topBarHeader { display: flex; height: 50px; width: 100%; position: relative; z-index: 99; flex: 1; }.topBar { position: fixed; background: #212529; height: 50px; width: 100%; flex: 1; -webkit-user-select: none; -webkit-app-region: drag; } /* ------------------------------------------ */.closeButton, .closeButtonDiv { display: flex; position: fixed; height: 20px; width: 60px; right: 10px; margin: auto; text-align: center; align-items: center; justify-content: center; border-radius: 40px; font-size: 10px; top: 15px; transition: 200ms ease-in-out; border: 0px; -webkit-app-region: no-drag; }.closeButton { background: var(--danger); -webkit-app-region: no-drag; }.closeButton:hover { background: #dad9d4; transition: 200ms ease-in-out; } /* ------------------------------------------ */.expandButton { display: flex; position: fixed; height: 20px; width: 40px; right: 80px; margin: auto; text-align: center; align-items: center; justify-content: center; border-radius: 40px; font-size: 10px; top: 15px; transition: 200ms ease-in-out; border: 0px; background: url("expand.png") center / contain no-repeat transparent; transform: rotate(90deg); -webkit-app-region: no-drag; }.expandButton:focus { transform: rotate(-90deg); -webkit-app-region: no-drag; } /* ------------------------------------------ */ #TopBarExpandMenu { display: flex; position: fixed; top: 15px; right: 110px; margin: auto; height: 20px; width: 0px; background: white; border-radius: 15px; transition: 200ms ease-in-out; transform: scale(1); align-items: center; } /* ------------------------------------------ */ #MaximizeButton, #MinimizeButton { display: flex; position: static; background: rgb(101, 217, 101); border-radius: 15px; color: black; padding: 1px; height: 90%; width: 50%; font-size: 10px; text-align: center; justify-content: center; margin-left: 2px; margin-right: 2px; text-decoration: none; -webkit-app-region: no-drag; } #MaximizeButton { background: rgb(234, 174, 57); } #MaximizeButton:hover, #MinimizeButton:hover { transform: scale(1.5); transition: 100ms ease-in-out; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK" crossorigin="anonymous"> <body id="mainBody" class="mainBody"> <div id="StatusBar" class="StatusBar"></div> <div class="container sideBar" id="sideBar"><button class="btn btn-primary menuButton" id="menuButton" type="button" onclick="sideBar()"></button> <div class="row sideBarRows" id="sideBarRows"> <div class="col" id="download_button_frame"><button class="btn btn-primary download_button" id="download_button" type="button">Download Loads</button></div> <div class="col" id="ManualDeploy_Frame"><button class="btn btn-primary ManualDeploy_Button" id="ManualDeploy_Button" type="button">Manual Deploy</button></div> </div> </div> <header id="topBarHeader" class="topBarHeader"> <div id="topBar" class="topBar"></div> <div id="TopBarExpandMenu" class="TopBarExpandMenuClass"><a id="MaximizeButton" class="MaximizeButton" href="#">Minimize</a><a id="MinimizeButton" class="MinimizeButton" href="#">Maximize</a></div> <div id="closeButtonDiv" class="closeButtonDiv" style="color: var(--danger);"><button class="btn btn-primary closeButton" id="closeButton" type="button">Close</button></div><button class="btn btn-primary expandButton" id="expandButton" type="button" onclick="ExpandMenu()"></button> </header> <script src="assets/js/jquery.min.js"></script> <script src="assets/bootstrap/js/bootstrap.min.js"></script> <script src="assets/js/mainJavaScript.js"></script> <script src="assets/js/operationJavaScript.js"></script> </body>

Answer 1

I advise you to apply rule opacity together with width: 0 . And also, to shorten the code, I advise you to add and remove styles using the classlist :

Add class:

document.querySelector("#TopBarExpandMenu").classList.add('active');

Remove class:

document.querySelector("#TopBarExpandMenu").classList.remove('active');

Also, add this selector to your css:

#TopBarExpandMenu.active {
  width: 120px;
  opacity: 1;
}

And add opacity: 0 to #TopBarExpandMenu .

 function ExpandMenu() { var ButtonExpandMenuWidth = document.getElementById("TopBarExpandMenu"), style = window.getComputedStyle(ButtonExpandMenuWidth), top = style.getPropertyValue("width"); if (top === "0px") { document.querySelector("#TopBarExpandMenu").classList.add('active'); } else if (top === "120px") { document.querySelector("#TopBarExpandMenu").classList.remove('active'); } }

 #mainBody { height: 600px; min-height: 600px; width: 1200px%; margin: 0; padding: 0; box-sizing: border-box; position: relative; } /* ------------------------------------------ */ #sideBar { transition: 500ms ease-in-out; height: 100%; width: 150px; position: fixed; left: 0; background: #212529; z-index: 100; border-right: 1px solid; border-color: cyan; } /* ------------------------------------------ */ #StatusBar { background: #30FF83; width: 100%; height: 1px; position: fixed; max-height: 3px; z-index: 101; } /* ------------------------------------------ */ #sideBarRows { position: fixed; top: 60px; width: inherit; z-index: 50; } /* ------------------------------------------ */ #download_button { background: transparent; width: inherit; text-align: left; border: none; height: 33px; top: -8px; position: relative; color: white; font-size: 12px; } #download_button_frame { height: 50px; position: relative; border-left: 2px solid var(--red); padding-top: 15px; margin-right: 1%; } /* ------------------------------------------ */ #ManualDeploy_Frame { height: 50px; position: relative; border-left: 2px solid var(--red); top: 20px; z-index: 50; } #ManualDeploy_Button { border: 0px; width: auto; height: 42px; position: relative; text-align: left; top: 4px; font-size: 12px; background-color: transparent; margin-left: 1px; } /* ------------------------------------------ */.menuButton { background: transparent; background: url("menu.png") center / contain, rgba(181,20,20,0); width: 40px; height: 40px; position: fixed; left: 1%; border: none; top: 2%; transition: 500ms ease-in-out; -webkit-app-region: no-drag; transform: rotate(0deg); z-index: 1000; -webkit-app-region: no-drag; } #menuButton:focus { background: url("menu.png") left / contain no-repeat transparent; outline: 0px; } #menuButton:hover { background: url("menu.png") left / contain no-repeat transparent; } /* ------------------------------------------ */ /* ------------------------------------------ */.DownloadPage_Frame { display: flex; background: #212529; position: fixed; z-index: 99; height: 100%; width: 100%; right: 0%; top: 0%; } /* ------------------------------------------ */.topBarHeader { display: flex; height: 50px; width: 100%; position: relative; z-index: 99; flex: 1; }.topBar { position: fixed; background: #212529; height: 50px; width: 100%; flex: 1; -webkit-user-select: none; -webkit-app-region: drag; } /* ------------------------------------------ */.closeButton, .closeButtonDiv { display: flex; position: fixed; height: 20px; width: 60px; right: 10px; margin: auto; text-align: center; align-items: center; justify-content: center; border-radius: 40px; font-size: 10px; top: 15px; transition: 200ms ease-in-out; border: 0px; -webkit-app-region: no-drag; }.closeButton { background: var(--danger); -webkit-app-region: no-drag; }.closeButton:hover { background: #dad9d4; transition: 200ms ease-in-out; } /* ------------------------------------------ */.expandButton { display: flex; position: fixed; height: 20px; width: 40px; right: 80px; margin: auto; text-align: center; align-items: center; justify-content: center; border-radius: 40px; font-size: 10px; top: 15px; transition: 200ms ease-in-out; border: 0px; background: url("expand.png") center / contain no-repeat transparent; transform: rotate(90deg); -webkit-app-region: no-drag; }.expandButton:focus { transform: rotate(-90deg); -webkit-app-region: no-drag; } /* ------------------------------------------ */ #TopBarExpandMenu { display: flex; position: fixed; top: 15px; right: 110px; margin: auto; height: 20px; width: 0; background: white; border-radius: 15px; transition: 200ms ease-in-out; transform: scale(1); align-items: center; opacity: 0; } #TopBarExpandMenu.active { width: 120px; opacity: 1; } /* ------------------------------------------ */ #MaximizeButton, #MinimizeButton { display: flex; position: static; background: rgb(101,217,101); border-radius: 15px; color: black; padding: 1px; height: 90%; width: 50%; font-size: 10px; text-align: center; justify-content: center; margin-left: 2px; margin-right: 2px; text-decoration: none; -webkit-app-region: no-drag; } #MaximizeButton { background: rgb(234,174,57); } #MaximizeButton:hover, #MinimizeButton:hover { transform: scale(1.5); transition: 100ms ease-in-out; }

 <div id="StatusBar" class="StatusBar"></div> <div class="container sideBar" id="sideBar"><button class="btn btn-primary menuButton" id="menuButton" type="button" onclick="sideBar()"></button> <div class="row sideBarRows" id="sideBarRows"> <div class="col" id="download_button_frame"><button class="btn btn-primary download_button" id="download_button" type="button">Download Loads</button></div> <div class="col" id="ManualDeploy_Frame"><button class="btn btn-primary ManualDeploy_Button" id="ManualDeploy_Button" type="button">Manual Deploy</button></div> </div> </div> <header id="topBarHeader" class="topBarHeader"> <div id="topBar" class="topBar"></div> <div id="TopBarExpandMenu" class="TopBarExpandMenuClass"><a id="MaximizeButton" class="MaximizeButton" href="#">Minimize</a><a id="MinimizeButton" class="MinimizeButton" href="#">Maximize</a></div> <div id="closeButtonDiv" class="closeButtonDiv" style="color: var(--danger);"><button class="btn btn-primary closeButton" id="closeButton" type="button">Close</button></div><button class="btn btn-primary expandButton" id="expandButton" type="button" onclick="ExpandMenu()"></button> </header>