How to close a collapsed sidebar on click using JavaScript?

Question

I've created a collapsed sidebar that opens using an animated hamburger menu icon. However, I am unable to close it using JavaScript. My goal is to open and close my sidebar when I click on the animated icon. If there are any suggestions, that would be greatly appreciated! Hopefully, the code below is sufficient enough to recreate the problem.

HTML:

<h1>Sidebar Navigation</h1>

    <div id="mySidebar" class="sidebar">
        <a><i class="fa fa-home"></i> &nbsp;Home</a>
        <a><i class="fa fa-file-text"></i> &nbsp;Menu</a>
        <a><i class="fa fa-user-circle"></i> &nbsp;About</a>
        <a><i class="fa fa-group"></i> &nbsp;Careers</a>
        <a><i class="fa fa-map-marker"></i> &nbsp;Find a Store</a>
    </div>

    <div id="content">
        <div class="openBtn" onclick="myFunction(this)"> 
            <div class="bar1"></div>
            <div class="bar2"></div>
            <div class="bar3"></div>
        </div>
        <p>Content pushed to the right when hamburger icon is clicked on which opens the sidebar.</p>
    </div>

CSS:

h1 {
    text-align: center;
    color: black;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: black;
    margin: 6px 0;
    position: relative;
    bottom: 60px;
    left: 10px;
    cursor: pointer;
    transition: 0.4s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}

.sidebar {
    height: 100%;
    width: 0;
    position: fixed;
    background-color: #007CC7;
    top: 0;
    left: 0;
    padding-top: 20px;
    z-index: 1;
    overflow-x: hidden;
    transition: 0.5s;
}

.sidebar a {
    padding: 6px 8px 6px 16px;
    display: block;
    font-size: 25px;
    transition: 0.3s;
}

.sidebar a:hover {
    cursor: pointer;
}

#content {
    color: black;
    transition: margin-left 0.5s;
}

a {
    color: white;
}

JavaScript:

function myFunction(x) {
  x.classList.toggle("change");
  document.getElementById("mySidebar").style.width = "250px";
  document.getElementById("content").style.marginLeft = "250px";
}

Answer 1

Adjust the internal logic of your myFunction function. Before using Vanilla.js to trigger the toggle event, first judge whether the element width needs to be adjusted this time.

You can click the Run code snippet or Expand snippet button below to see that the function fulfills your problem requirements..

function myFunction(x) {
  adjustWidth("mySidebar");
  x.classList.toggle("change");
}

function adjustWidth(id){
  const btnDiv = document.getElementById('content');
  const e = document.getElementById(id);
  const eWidth = e.style.width;
  e.style.width = eWidth == '' ? "250px" : '';
  btnDiv.style.marginLeft = e.style.width;
}

h1 {
    text-align: center;
    color: black;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: black;
    margin: 6px 0;
    position: relative;
    bottom: 60px;
    left: 10px;
    cursor: pointer;
    transition: 0.4s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}

.sidebar {
    height: 100%;
    width: 0;
    position: fixed;
    background-color: #007CC7;
    top: 0;
    left: 0;
    padding-top: 20px;
    z-index: 1;
    overflow-x: hidden;
    transition: 0.5s;
}

.sidebar a {
    padding: 6px 8px 6px 16px;
    display: block;
    font-size: 25px;
    transition: 0.3s;
}

.sidebar a:hover {
    cursor: pointer;
}

#content {
    color: black;
    transition: margin-left 0.5s;
}

a {
    color: white;
}

<h1>Sidebar Navigation</h1>

<div id="mySidebar" class="sidebar">
    <a><i class="fa fa-home"></i> &nbsp;Home</a>
    <a><i class="fa fa-file-text"></i> &nbsp;Menu</a>
    <a><i class="fa fa-user-circle"></i> &nbsp;About</a>
    <a><i class="fa fa-group"></i> &nbsp;Careers</a>
    <a><i class="fa fa-map-marker"></i> &nbsp;Find a Store</a>
</div>

<div id="content">
    <div class="openBtn" onclick="myFunction(this)"> 
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
    </div>
    <p>Content pushed to the right when hamburger icon is clicked on which opens the sidebar.</p>
</div>