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);

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" />')
    }
}
$(".nav-btn").bind("click", function(){
    toggleDivs();
});

});


});//]]> 


})(jQuery);