Show hide double navigation pure javascript

Show hide double navigation pure javascript

by Adi Jaya

HTML

<div class="conteiner center">
<button onclick="opendoublesidebar();">Open Sidebar</button>
</div>

<nav class="demo" id="leftsidebar">
<span class="pointer" onclick="closesidebar();">close [x]</span>
  <ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
  </ul>
</nav>
<nav class="demo" id="rightsidebar">
<span class="pointer" onclick="closesidebar();">close [x]</span>
    <ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
  </ul>
</nav>

<script>
function opendoublesidebar() {
	document.getElementById("leftsidebar").style.width = "150px";  
  document.getElementById("rightsidebar").style.width = "150px";
}
function closesidebar() {
	document.getElementById("leftsidebar").style.width = "0px";  
 	document.getElementById("rightsidebar").style.width = "0px";
}
</script>

CSS

.center{
  text-align:center;
}
.demo{
  color:white;
}
.pointer{
  cursor:pointer;
}
.pointer:active{
  position:relative;
  top:2px;
}
.pointer:hover{
  padding:5px;
  border-bottom:2px solid white;
}
#leftsidebar {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    overflow-x: hidden;
    transition: 5s;
    margin: 0px 15px 15px 15px;
    background: red;
}
#rightsidebar {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 999;
    top: 0;
    right: 0;
    overflow-x: hidden;
    transition: 5s;
    margin: 0px 15px 15px 15px;
    background: orange;
}