Easy Jquery Sidebar

by Kirubel Girma

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<button id="sidebartoggle"></button>

<div class="sidecont">
  <div class="sy_sidebar"></div>
</div>

CSS

.sidecont {
  background: red;
  height: 100%;
  width: 100%;
  position: absolute;
}

.sy_sidebar {
  position: absolute;
  top: 50px;
  bottom: 0;
  right: -65vw;
  width: 65vw;
  background: black;
  transition: right 0.145s ease-in;
}

.sidebar-open .sy_sidebar {
  right: 0;
}

#sidebartoggle:before {
  content: "Sidebar";
}

.sidebar-open #sidebartoggle:before {
  content: "Close";
}

JavaScript

$(document).on("click", "#sidebartoggle", function() {
  $('body').toggleClass("sidebar-open");
});