JSFiddle - React, Tailwind, and code Playground

by Kelly Hawker

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://responsive.sites.acclipse.com/files/scripts/jquery.cookie.js"></script>
<div id="slideOut" class="clearfix">
  <div id="slideContent">
    <div style="padding:30px;">
      <p>Content</p>
    </div>
  </div>
  <div id="slideClick">
    <div class="arrowMsg">
      <i class="fa fa-info-circle slideOpen hideBtn"></i>
      <i class="fa fa-times slideClose"></i>
    </div>
  </div>
</div>

<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>

CSS

.hideBtn {
  display: none !important;
}

#slideOut {
  position: fixed;
  width: 395px;
  top: 42px;
  right: 0px;
}

#slideClick {
  float: left;
  height: 50px;
  width: 50px;
  background: #e56600;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  cursor: pointer;
  text-align: center;
}

#slideClick i {
  color: #fff;
  line-height: 50px;
  font-size: 28px;
}

#slideContent {
  background: #e56600;
  width: 345px;
  float: right;
  color: #fff;
}

#slideContent p {
  color: #fff;
}

#slideContent a {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

#slideContent a.linkbuttons {
  text-decoration: none;
  padding: 8px 0px 8px 0px;
  width: 100%;
}

#slideContent a:hover {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

JavaScript

$(function() {
  $('#slideOut').css('right','-345px');        
  if ($.cookie('myCookieName')) {
    $('#slideClick').click();
  }
 }); 
  $('#slideClick').click(function() {
  var it = $(this).data('it') || 1;
    switch (it) {
      case 2:
        $(this).parent().animate({
          right: '-345px'
        }, {
          queue: false,
          duration: 500
        });
        $(".slideClose").addClass('hideBtn');
        $(".slideOpen").removeClass('hideBtn');
        break;
      case 1:
        $(this).parent().animate({
          right: '0px'
        }, {
          queue: false,
          duration: 500
        });
        $(".slideOpen").addClass('hideBtn');
        $(".slideClose").removeClass('hideBtn');
        break;
    }
    it++;
    if (it > 2) it = 1;
    $(this).data('it', it);
    $.cookie('myCookieName', '1')
  });