JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mapButton">Site Map</div>

<div class="wrap">
    <div id="siteMap">
        <div id="theMap">[The Site Map Goes Here]</div>
    </div>
</div>

CSS

#siteMap {
  width:500px;
  position:fixed;
  Xleft:-500px;
  display:block;
   background: orange;
}
#mapButton {
  display:block;
  color:#333;
  background-color:#ACACAC;
  height:20px;
  width:70px;
  text-align:center;
  cursor:pointer;

}

.wrap {
    width:500px;
   
}

#theMap {
  width:250px;
  height:350px;
  background-color:#666;
}

JavaScript

$(document).ready(function() {
    $('#mapButton').click(function() {
      var mapPos = parseInt($('#siteMap').css('left'));
      if (mapPos < 0) {
        $('#siteMap').animate({
          left: '+=500'
          }, 458, 'swing', function() {
            // Animation complete.
          });
      }
      else {
        $('#siteMap').animate({
          left: '-=500'
          }, 458, 'swing', function() {
            // Animation complete.
        });
      } 
    });
  });