JSFiddle - React, Tailwind, and code Playground

by carlyldn

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
 <div class="slide-out">
      <div class="slide-out-tab">
        <div>
          <p>QUIZ NIGHT</p>
        </div>
      </div>
      <div class="slide-out-content">
        <div class="slide-title"> 
          <h3>QUIZ NIGHT<br>£100 prize pot <br>Tuesdays <br>7pm - 9pm</h3>
          <a href="#">Book Now</a>
        </div>
      </div>
    </div>

CSS

.slide-out {
  background-color: #000;
  color: #fff;
  position: fixed;
  width: 300px;
  top: 90%;
  transform: translateY(-90%);
  right: -300px;
  min-height: 230px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5000;
}

.slide-out-tab {
  background-color: #E84E1C;
  border-radius: 4px 0 0 4px;
  cursor: pointer;
  height: 100%;
  left: -40px;
  position: absolute;
  width: 40px;
}

.slide-out-tab div {
  text-align: center;
  position: relative;
  right: 75px;
  top: 90px;
  color: #fff;
  padding: 1px 5px;
  width: 180px;
  transform: rotate(270deg);
  writing-mode: lr-tb;
}

.slide-out-content {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

/* .slide-out.is-active {
  right: -300px;
} */

JavaScript

$(window).on("load", function() {
   $(".slide-out").animate({ "right": "0px" }, "slow" );
   $(".slide-out-tab").click(
function () { 
  $(".slide-out").animate({ "right": "-=300px" }, "slow" );
}); 
});


// $(window).on("load", function() {
//    $(".slide-out").animate({ "right": "0px" }, "slow" );
//    $(".slide-out-tab").click(
//     function(){
//   $(".slide-out").animate({ "right": "-=300px" }, "slow" );
// },
// function () { 
// $(".slide-out").animate({"right": "0px" }, "slow");
// });
// });

 

//     const $slideOut = $('.slide-out')
// $slideOut.find('.slide-out-tab').on('click', () => {
//   $slideOut.toggleClass('is-active')
// })


// $(document).ready(function() {
//   $(".slide-out-tab").click(function(){
//     $(".slide-out").toggleClass("is-active");
// });
// });