JSFiddle - React, Tailwind, and code Playground

by sagar Bhanushali

HTML

<div class="pt-wrapper">
  <button class="control">click me</button>
  <div class="blog blog-collapsed"></div>
</div>

SCSS

$from-top: 0px;
$top-default: 50px;
$from-right: 0px;
$right-default: 150px;

.pt-wrapper {
  position: relative;
  .control {
    position: absolute;
    right: 0px;
  }
  .blog {
  overflow: hidden;
  transition: all 1000ms ease-in-out;
  background: #ddd;
  position: absolute;
}

  .blog-visible {
  width: 250px;
  height: 100px;
  right: $right-default;
  top: $top-default;
  animation-name: showMenu;
  animation-duration: 1s;
}

  .blog-collapsed {
  width: 0px !important;
  height: 0px !important;
  right: $from-right;
  top: $from-top;
  animation-name: hideMenu;
  animation-duration: 1s;
}


  @keyframes showMenu {
    from {
        // opacity: 0;
        top: $from-top;
        right: $from-right;
    }
    to {
        // opacity: 1;
         top: $top-default;
         right: $right-default;
    }
  }
  @keyframes hideMenu {
    from {
       // opacity: 1;
         top: $top-default;
         right: $right-default;
    }
    to {
        // opacity: 0;
        top: $from-top;
        right: $from-right;
    }
  }
}

JavaScript

$( ".control" ).click(function() {
		$(".blog").toggleClass("blog-visible blog-collapsed");
});