JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">
  <div class="nav-btn"><img alt="open" src="http://bookbecho.com/img/feedback.png" /></div>

  aaaaaaaaaaaaaaaaaaaaaa
</div>

CSS

div#nav {
  position: fixed;
  top: 37.5%;
  right: 0;
  margin: 0;
  padding: 0px 0 0;
  background-color: #c1c1c1;
  list-style: none;
  z-index: 9999;
  width: 230px;
  border-radius: 0px 0 0 0px;
  height: 202px;
  border: 2px solid #000;
}

div#nav .nav-btn {
  position: absolute;
  top: 0px;
  left: -33px;
  width: 31px;
  height: 217px;
  display: block;
  cursor: pointer;
  margin-top: -2px;
}

div#nav .nav-btn img {
  margin: 0px 0 0 0px;
}

div#nav li {
  width: 100px;
  margin-bottom: 20px;
  text-align: center;
  text-decoration: none;
  color: #FFF;
}

div#nav li a {
  color: #FFF;
  text-decoration: none;
}

p.helpParagraph {
  color: #ff6699;
  text-align: center;
  margin-top: 9%;
  font: 26px/1.2 'FuturaBT-Book', Arial, Helvetica, sans-serif;
}

p.csText {
  padding-left: 6%;
  font: 14px/1.2 'FuturaBT-Book', Arial, Helvetica, sans-serif;
  color: #323470;
}

button.cs-button {
  background: #323470;
  color: #fff;
  margin-left: 5%;
  padding-bottom: 2%;
  padding-top: 2%;
  border: none;
  width: 90%;
  margin-bottom: 4%;
}

JavaScript

(function($) {
  //<![CDATA[
  $(document).ready(function() {

    $(function() {
      $('#nav').stop().animate({
        'margin-right': '-230px'
      }, 1);

      $(".nav-btn").bind("click", function() {
        toggleDivs();
      });

    });
    $('html').click(function() {
      //Hide the menus if visible
      var $inner = $("#nav");
      if ($inner.css("margin-right") != "-230px") {
        closediv();
      }
    });

    function toggleDivs() {
      var $inner = $("#nav");
      if ($inner.css("margin-right") == "-230px") {
        $inner.animate({
          'margin-right': '0'
        });
        $(".nav-btn").html('<img src="http://bookbecho.com/img/feedback.png" alt="open" />')
      } else {
        $inner.animate({
          'margin-right': "-230px"
        });
        $(".nav-btn").html('<img src="http://bookbecho.com/img/feedback.png" alt="close" />')
      }
    }

    function closediv() {
      var $inner = $("#nav");
      $inner.animate({
        'margin-right': "-230px"
      });
      $(".nav-btn").html('<img src="http://bookbecho.com/img/feedback.png" alt="close" />')
    }

  }); //]]> 


})(jQuery);