JSFiddle - React, Tailwind, and code Playground

by orjan

HTML

<button id="share-btn">Share</button>

<div id="share-services">bla bla bla</div>

CSS

#share-services {
    opacity: 0;
    background-color: #333;
    color: #fff;
    position: absolute;
}

.share-btn {
    position: absolute;
}

.active {
    background: black;
    color: #fff;
}
}

JavaScript

$('#share-btn').click(function () {
       if ($(this).hasClass('active')) {
           $('#share-services').animate({
               width: '20px',
               height: '20px',
               top: '0',
               left: '5px',
               opacity: 0
           }, function () {
               $(this).hide();
           });
           $("#share-btn").removeClass('active');
       } else {
           $('#share-services').show().animate({
               opacity: 0.9,
               width: '200px',
               height: '200px',
               top: '30px',
               left: '5px'
           });
           $("#share-btn").addClass('active');
       }
   });

   $('.share-link').click(function () {
       $('#share-services').animate({
           width: '10px',
           height: '10px',
           top: '0',
           left: '65px'
       }).toggle();
       $("#share-btn").toggleClass('active');
   });