JSFiddle - React, Tailwind, and code Playground

by wutyeetun87

HTML

<div id="nav">
  <div class="nav-btn"><img src="images/slide-out.png" alt="open" /></div>
  <ul class="main-tabs">
    <li>CDL Hospitality Trusts ("CDLHT") is one of Asia’s leading hospitality trusts with assets valued at S$2.5 billion. It comprises CDL Hospitality Real Estate Investment Trust ("H-REIT"), a real estate investment trust, and CDL Hospitality Business
      Trust ("HBT"), a business trust. CDLHT was listed on the Mainboard of the Singapore Exchange Securities Trading Limited on 19 July 2006, with H-REIT being the first hotel real estate investment trust in Asia (ex Japan).</li>
  </ul>
</div>

CSS

div#nav {
  position: fixed;
  top: 100px;
  right: 0px;
  margin: 0px;
  padding: 20px 0px 0px;
  background: #5681b4;
  list-style: none;
  z-index: 9999;
  width: 100px;
  border-radius: 10px 0px 0px 10px
}

div#nav .nav-btn {
  background: #5681b4;
  border-radius: 10px 0px 0px 10px;
  position: absolute;
  top: 10px;
  left: -40px;
  width: 40px;
  height: 70px;
  display: block;
  cursor: pointer;
}

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

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

JavaScript

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

  function toggleDivs() {
    var $inner = $("#nav");
    if ($inner.css("margin-right") == "-100px") {
      $inner.animate({
        'margin-right': '0'
      });
      $(".nav-btn").html('<img src="images/slide-out.png" alt="open" />')
    } else {
      $inner.animate({
        'margin-right': "-100px"
      });
      $(".nav-btn").html('<img src="images/slide-out.png" alt="close" />')
    }
  }
  $(".nav-btn").bind("click", function() {
    toggleDivs();
  });

});