JSFiddle - React, Tailwind, and code Playground

by 1eddy87

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="test">
  <a href="#" class="notcon-btn-one abc-btn" data-container-status="is-closed">
    <i class="notcon-icon fa fa-facebook-official fa-2x"></i>
  </a>
  <div class="notcon-container container">Facebook</div>

  <a href="#" class="notcon-btn-two abc-btn" data-container-status="is-closed" style="float: right;">
    <i class="notcon-icon fa fa-google fa-2x"></i>
  </a>
  <div class="notcon-container container" style="right: 100px;">Google</div>
</div>

CSS

body {
  padding: 0;
  margin: 0;
}

.container {
  display: none;
  position: absolute;
  background-color: #333;
  padding: 10px;
  color: #fff;
}

.test {
  position: relative;
  height: auto;
  background-color: #fafafa;
  padding: 10px 100px;
}

.abc-active {
  display: block;
}

JavaScript

$("[class^=notcon-btn-]").click(function() {
  if ($(this).attr('data-container-status') == 'is-open') {
    $(this).attr('data-container-status', 'is-closed');
  } else {
    closeAll();
    $(this).attr('data-container-status', 'is-open');
  }
  $(this).next().toggleClass('abc-active');
});

var icon = $('.notcon-icon'),
container = $('.container');

$(document).click(function(e) {
  var className = e.target.className;
  if (className.indexOf('icon') != -1 || className.indexOf('container') != -1) {
    return;
  }
  closeAll();
});

function closeAll() {
  $('.container').removeClass('abc-active');
  $('.abc-btn').attr('data-container-status', 'is-closed');
}