JSFiddle - React, Tailwind, and code Playground

by D S

HTML

<div class="shr">
  <div class="pnl" style="display:none">
    <div class="fb"><a href="s"></a></div>
    <div class=""></div>
    <div class=""></div>
  </div>
</div>

CSS

.shr {
  width: 22px;
  height: 22px;
  border: 1px solid #fffX;
  position: absolute;
  margin: 10px 0 0 10px;
  background: url(https://goo.gl/cBWme7);
  background-size: cover;
  background-position: center;
}

.shr > .pnl {
  width: 120px;
  height: 22px;
  margin-left: 22px;
  background: rgba(255, 55, 255, .8);
}

.shr > .pnl > div {
  width: 30px;
  height: 100%;
  float: left;
  border: 1px solid black;
  display: block;
  line-height: 22px;
  position: relative;
}

.shr > .pnl a {
  width: 100%;
  height: 100%;
  display: block;
  color: white;
  position: absolute;
  top: 0px;
}

JavaScript

$("div.shr").on("click tap", function() {

  var visibleObj = $('.shr > div:visible');
  if ($("div.pnl").css("display") == "none") {
    $("div.pnl").fadeIn(500, function() {
      $(this).css("display", "block");
    })
  } else {
    $("div.pnl").fadeOut(500, function() {
      $(this).css("display", "none");
    });
  }
});