Q:

How can I toggle more than one element on a single click in jQuery?

I am trying to make sidedrawer for which I have added a hamburger menu which the user will click. The side-navigation should then open and change the hamburger icon to a cross button. 
Although it works fine until this point, the problem is am unable to figure out how to close side-navigation.
This is my code
index.html
<li class="nav-item hide-on-mb icon-box">
  <a href="#" class="nav-link closebtn ">                    
    <i id="sideToggleBtn" class="fas fa-bars"></i>
  </a>
</li>

main.js
$(document).ready(function() {
  $(".icon-box").click(function() {
    $("#sideToggleBtn").toggleClass("fa-bars fa-times");
    $(".sidenav").css("width", "450px");
  });
});

main.scss
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    background-color: $nav-Color;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

index.html    (sidenav)
<div id="mysidenav" class="sidenav">
        <div class="container">
            <div class="brand-wrapper">
                <h1 class="brand-title">
                    Hello
                </h1>
            </div>
            </div>
        </div>
    </div>

A:

I would do something like that if I understood well the problem !
$(document).ready(function() {
    $(".icon-box").click(function() {
        $("#sideToggleBtn").toggleClass("fa-bars fa-times");
        $(".sidenav").toggleClass('sidenav-open');
        $(".sidenav").css("width", $(".sidenav").hasClass('sidenav-open') ? "450px" : "0px");
    });
});

