drawer slide in from left + right - final

by ian_smithz

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/2.0.0/jquery.mobile-events.min.js"></script>
<div class="drawer-container reverse-colours">
  inital content right arrow inital content right arrow inital content right arrow inital content right arrow inital content right arrow inital content right arrow inital content right arrow inital content right arrow inital content right arrow inital content
  right arrow inital content right arrow inital content right arrow inital content right arrow
  <div class="drawer">

    <div class="drawer-handle"><span class="drawer-arrow"></span></div>

    <div class="drawer-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid laboriosam tempore porro minima saepe culpa consectetur. Impedit ipsa quisquam tenetur cumque odit cum aliquam enim inventore asperiores perferendis quos quaerat.</p>
    </div>

  </div>
</div>

<p>

</p>

<div class="drawer-container-alt">
  inital content left arrow inital content left arrowinital content left arrowinital content left arrowinital content left arrowinital content left arrowinital content left arrowinital content left arrowinital content left arrowinital content left arrow
  <div class="drawer alt">

    <div class="drawer-handle-alt"><span class="drawer-arrow"></span></div>

    <div class="drawer-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid laboriosam tempore porro minima saepe culpa consectetur. Impedit ipsa quisquam tenetur cumque odit cum aliquam enim inventore asperiores perferendis quos quaerat.</p>
    </div>

  </div>
</div>

CSS

.drawer-container {
  height: 300px;
  background-color: #000;
  position: relative;
  color: white;
  padding: 15px 50px 15px 15px;
  overflow: hidden;
  /* temp */
  margin: 0 auto;
  max-width: 500px;
}

.drawer-container-alt {
  height: 300px;
  background-color: #000;
  position: relative;
  color: white;
  padding: 15px 15px 15px 50px;
  overflow: hidden;
  /* temp */
  margin: 0 auto;
  max-width: 500px;
}

.reverse-colours.drawer-container, .reverse-colours.drawer-container-alt {
  background-color: #d52225;
} 

@media (min-width: 1025px) {
  .drawer-container,
  .drawer-container-alt {
    padding: 15px;
  }
}

.drawer {
  position: absolute;
  transition: left 1s;
  left: calc(100% - 40px);
  top: 0;
  height: 100%;
  width: 100%;
  display: flex;
}

.drawer.alt {
  transition: right 1s;
  right: calc(100% - 40px);
  left: inherit;
  flex-direction: row-reverse;
}

.expanded .drawer {
  transition: left 1s;
  left: 0;
}

.expanded-alt .drawer {
  transition: right 1s;
  right: 0;
}

/* BUTTONS */

.drawer-handle,
.drawer-handle-alt {
  width: 40px;
  padding: 0;
  border: 0;
  background: #d52225;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.reverse-colours .drawer-handle, .reverse-colours .drawer-handle-alt {
  background: #000;
}

@media (min-width: 1025px) {
  .drawer-handle,
  .drawer-handle-alt {
    display: none;
  }
}

/* CONTENT CONTAINER */

.drawer-content {
  position: absolute;
  top: 0;
  left: 40px;
  bottom: 0;
  padding: 10px 15px;
  min-width: 200px;
  background-color: #f5f5f5;
  color: #333;
  box-shadow: 0 4px 6px -2px rgba(0, 0, 0, .2);
}

.alt .drawer-content {
  right: 40px;
  left: inherit;
}

@media (min-width: 1025px) {
  .drawer-content {
    display: none;
  }
}

/* ARROWS */

.drawer-arrow:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 18px 15px 0;
  border-color: transparent #000 transparent transparent;
  transform:...

JavaScript

$(document).ready(function() {


  $('.drawer-handle').on('click swipe', function() {
    $('.drawer-container').toggleClass('expanded');
  });


  $('.drawer-handle-alt').on('click swipe', function() {
    $('.drawer-container-alt').toggleClass('expanded-alt');
  });

});