How to close sidebar, when a button is selected?

Question

I've never used Javascript and I've only been programming for less than a year, so please don't blame me if I did something stupid. My question is, how do I close the sidebar when a button is clicked? I guess I should make it in Javascript but I don't know how.

Here is my JS code:

function show(){
  document.getElementById('sidebar').classList.toggle('active')
  document.getElementById('sidebarbg').classList.toggle('active')
}

CSS code (that's not the full css code obviously, I deleted the most) :

#sidebar{
  background-color: #cc2f70;
  width: 310px;
  height: 100%;
  position: fixed;
  left: -310px;
  transition-duration: 0.3s;
}
#sidebarbg{
  background-color: #00a6b7;
  width: 300px;
  height: 100%;
  position: fixed;
  left: -300px;
  transition-delay: 0.15s;
  transition-duration: 0.3s;
}
#sidebar.active{
  left: 0;
}
#sidebarbg.active{
  left: 0;
}
#sidebar ul{
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.button{
  position: fixed;
  top: 30px;
  left: 220px;
  z-index: 5;
  transition: 0.4s;
}
.button span{
  width: 30px;
  height: 5px;
  background-color: white;
  display: block;
  margin: 5px;
}

html:

<div class="button" onclick="show()">
  <span>click here</span>
  <span></span>
  <span></span>
</div>
<div class="logo">
  <span>lo</span><br><span>go</span>
</div>
<div id="sidebar">
  <div id="sidebarbg"></div>
  <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
  </ul>
</div>    

Answer 1

add this script

var lis = document.querySelectorAll("ul li");
for (var i = 0; i < lis.length; i++) {
  lis[i].addEventListener("click", show);
}