jQuery toggle() for sliding menu

Question

I am trying to achieve toggle option using jQuery. I have two styles (sub-menu-icon and sub-menu-mobile). On clicking on "sub-menu-icon" class div, i want to toggle "sub-menu-mobile" class div to toggle from left to right and right to left.

$(document).ready(function() {
  $('.sub-menu-icon').toggle(function() {
    $(".sub-menu-mobile").css("width", "200px");
  });
});

.sub-menu-icon {
  width: 30px;
  height: 30px;
  border: 1px solid #2B383E;
  background-color: #4390ce;
  display: block;
  float: right;
}
.sub-menu-mobile {
  min-width: 0px;
  height: 100%;
  background-color: #cccccc;
  position: absolute;
  top: 0px;
  right: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sub-menu-icon">
  Icon
</div>
<div class="sub-menu-mobile">
  Rights side Menu
</div>

Answer 1

You want to use a click handler on the menu, then toggle a class that toggles the width. You also need to re-arrange the HTML elements and add position: relative; to the menu so the menu will show up above the sidebar.

$('.sub-menu-icon').on('click',function() {
  $(".sub-menu-mobile").toggleClass('width');
});

    .sub-menu-icon {
      width: 30px;
      height: 30px;
      border: 1px solid #2B383E;
      background-color: #4390ce;
      display: block;
      float: right;
      position: relative;
    }
    
    .sub-menu-mobile {
      min-width: 0px;
      height: 100%;
      background-color: #cccccc;
      position: absolute;
      top: 0px;
      right: 0px;
    }
    
    .width {
      width: 200px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sub-menu-mobile">
  Rights side Menu
</div>
<div class="sub-menu-icon">
  icon
</div>