javascript - 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>

question from:https://stackoverflow.com/questions/65908823/how-to-resize-items-inside-collapsible-custom-bar

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>