JSFiddle - React, Tailwind, and code Playground

by Gaurav Kesarwani

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="btn-one abc-btn" data-container-status="is-closed">
      <i class="icon fa fa-facebook-official fa-2x" aria-hidden="true"></i>
    </a>
    <div class="container">Facebook</div>

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

CSS

body {
  padding: 0;
  margin: 0;
}

.container {
  display: none;
  position: absolute;
}

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

.btn-one {
  margin-right: 150px;
}

.btn-two {
  margin-left: 150px;
}
.abc-btn {
  display: inline-block;
}

.abc-active {
  display: block;
}

JavaScript

var icon = $('.icon');
    var container = $('.container');

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

    $('.btn-one').click(function() {
      if ($(this).attr('data-container-status') == 'is-open') {
        $(this).next().removeClass('abc-active');
        $(this).attr('data-container-status', 'is-closed');
      } else {
        closeAll();
        $(this).next().addClass('abc-active');
        $(this).attr('data-container-status', 'is-open');
      }
    });

    $('.btn-two').click(function() {
      if ($(this).attr('data-container-status') == 'is-open') {
        $(this).next().removeClass('abc-active');
        $(this).attr('data-container-status', 'is-closed');
      } else {
        closeAll();
        $(this).next().addClass('abc-active');
        $(this).attr('data-container-status', 'is-open');
      }
    });

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