JSFiddle - React, Tailwind, and code Playground

by Yonas Hailu

HTML

<body>
  <div class="lang-drop-down">
    <ul>
      <li><a class="selected" href="#">En</a></li>
      <li><a href="#">Am</a></li>
      <li><a href="#">AO</a></li>
      <li><a href="#">Tg</a></li>
    </ul>
  </div>
  <script>
    (function($) {

      $.fn.collapsz = function(options) {

        var settings = $.extend({
          selectedEl: ""
        }, options);

        var el = $(this);
        this.on('click', function(e) {

          $(this).toggleClass('open');
          settings.selectedEl.toggleClass('selected');

          if ($(e.target) && $(e.target.tagName).is("a")) {

            settings.selectedEl = $(e.target).toggleClass('selected');

          }

          e.preventDefault();

        });

        $(document).on('click', function(e) {

          var clickover = $(e.target);
          var opened = el.hasClass('open');

          if (opened === true && !clickover.hasClass('open') && !clickover.hasClass('selected')) {

            el.toggleClass('open');

          }

          e.preventDefault();

        });


        return this;
      };

    }(jQuery));

  </script>

</body>

CSS

* {
  padding: 0;
  margin: 0;
  outline: 0;
}

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
}

.lang-drop-down {
  top: 0;
  background: transparent;
  z-index: 999;
  left: 100px;
  top: 30px;
  position: absolute;
}

.lang-drop-down ul,
.lang-drop-down ul li,
.lang-drop-down ul li a {
  display: block;
  list-style: none;
}

.lang-drop-down ul li a {
  position: relative;
  display: block;
  font-size: 85%;
  color: #777;
  text-decoration: none;
  height: 0;
  visibility: hidden;
  opacity: 0;
  transform: scale(0);
  transition: transform 0.2s ease;
}

.lang-drop-down ul li a.selected {
  padding: 10px 30px;
  display: block;
  background: #fff;
  height: auto;
  visibility: visible;
  opacity: 1;
  padding: 10px 30px;
  transform: scale(1);
}

.lang-drop-down.open ul li a:hover {
  background: #f7f7f7;
}

.lang-drop-down.open {
  background: #fff;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
  border-radius: 2px;
}

.lang-drop-down.open {
  background: #fff;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.05);
  border-radius: 2px;
}

.lang-drop-down.open ul li a {
  display: block;
  background: #fff;
  transform: scale(1);
  width: 100%;
  visibility: visible;
  opacity: 1;
  height: auto;
  padding: 10px 30px;
}

.lang-drop-down ul li a.selected:after,
.lang-drop-down.open ul li a.selected:after {
  position: absolute;
  content: '';
  top: 18px;
  background: url('../fonts/down.svg');
  right: 10px;
  height: 5px;
  width: 10px;
}

.lang-drop-down.open ul li a.selected:after {
  background: none;
}

JavaScript

var $selected = $('.lang-drop-down a.selected');
var $langDropDown = $('.lang-drop-down');

$('.lang-drop-down').collapsz({
  selectedEl: $selected
});