JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<ul id="language" class="collapse"></ul>

CSS

ul#language {
  list-style: none;
  overflow: visible;
  min-width: 238px;
  position: absolute;
  top: 10px;
  z-index: 999;
  background: #fff;
  font-family: Helvetica;
  color: #333;
}

ul#language:hover {
  cursor: pointer;
}

ul#language.collapse {
  overflow: hidden;
  max-height: 42px;
}

ul#language li {
  border: 1px solid rgb(224, 224, 224);
  border-bottom: 0;
  padding: 5px 10px;
  background: #fff;
}

ul#language li.eng:hover,
ul#language li.lang:not(.less):hover {
  background-color: rgb(224, 224, 224);
}

ul#language li:last-child {
  border-bottom: 1px solid rgb(224, 224, 224);
}

ul#language li.eng:before {
  content: "Frequently Used";
  display: block;
  color: #333;
  padding: 10px 0 5px 35px;
}

ul#language li span {
  font-size: 16px;
  vertical-align: super;
  line-height: 25px;
  display: inline-block;
  padding: 0 5px;
}

u#languagel li:hover {
  background: #eee;
  cursor: pointer;
}

ul#language .logo {
  height: 30px;
  width: 30px;
  vertical-align: bottom;
}

h2 {
  position: relative;
  top: 100px;
  z-index: 9;
}

ul#language .selected:after {
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ5JMKaJbX0IZ-J1gOw_bdZ3lFWqnqLpJyEHw&usqp=CAU");
  position: absolute;
  top: 13px;
  right: 0;
  content: "";
  width: 30px;
  height: 30px;
  background-size: contain;
  background-repeat: no-repeat;
}

ul#language .selected.up:after {
  transform: rotate(180deg);
  top: 0;
}

ul#language .more,
ul#language .less {
  color: blue;
  padding: 15px 0;
  text-align: center;
  border: 1px solid rgb(224, 224, 224);
}

ul#language .more {
  border-top: 0;
}

ul#language .separator {
  padding: 0;
}

ul#language li.more+li.lang {
  padding-top: 20px;
}

ul#language li.lang:nth-last-of-type(2) {
  padding-bottom: 20px;
}

JavaScript

$(document).ready(function() {
  var $languageDiv = $("#language");
  var $selectedLanguageDiv = void 0

  function bootstrap() {
    let initElems = null;
    if (window.sessionStorage.selectedLanguage) {
      const {
        id,
        language
      } = JSON.parse(
        window.sessionStorage.selectedLanguage
      );
      initElems = `<li class="selected" data-id=${id}>
                            <img class="logo" src="./car.png"></img>
                            <span>${language}</span>
                        </li>
                        <li class="eng" data-id="9"><img class="logo" src="./car.png"></img><span>English</span></li>
                        <li class="separator"></li>
                        <li class="more init">Show more languages</li>`;
    } else {
      initElems = `<li class="selected" data-id="9">
                            <img class="logo" src="./car.png"></img>
                            <span>English</span>
                        </li>
                        <li class="eng" data-id="9"><img class="logo" src="./car.png"></img><span>English</span></li>
                        <li class="separator"></li>
                        <li class="more init">Show more languages</li>`;
    }

    $languageDiv.append(initElems);
    setTimeout(function() {
      $selectedLanguageDiv = $languageDiv.find(".selected");
    }, 500);
  }

  bootstrap();

  // handle show more languages
  function createLanguageDropDown() {
    // if language li is already in dom, hidden, unhide, don't re-create
    if ($languageDiv.find(".lang").length) {
      $languageDiv.find(".init").hide();
      $languageDiv.find(".lang").show();
      return;
    }

    // create language li
    var languages = [{
        LanguageId: "1",
        LanguageName: "Arabic",
      },
      {
        LanguageId: "4",
        LanguageName: "Chinese (Simplified)",
      },
      {
        LanguageId: "7",
        LanguageName: "German",
      },
      {
        LanguageId:...