JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<ul class="custom-dd sleep collapse">
      <span class="arrow down"></span>
      <li class="placeholder">Select an option</li>
    </ul>

    <ul class="custom-dd work collapse">
      <span class="arrow down"></span>
      <li class="placeholder">Select an option</li>
    </ul>

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.sleep {
  top: 100px;
}

.work {
  top: 250px;
}

ul.custom-dd {
  border: 1px solid #b3b3b3;
  width: 383px;
  margin: 0;
  padding: 0;
  overflow-y: scroll;
  margin-top: 20px;
  position: absolute;
  z-index: 9;
  background-color: #fff;
}

ul.custom-dd.active {
  z-index: 10;
}

ul.collapse {
  height: 40px;
  overflow: hidden;
}

ul.collapse li.placeholder {
  border-bottom: 0;
}

li.placeholder {
  color: #b3b3b3;
  font-weight: 200;
}

li.placeholder.value {
  color: #333;
  font-weight: normal;
}

ul li:nth-last-child(1) {
  border-bottom: 0;
}

li {
  list-style: none;
  line-height: 40px;
  color: #333;
  border-bottom: 1px solid #b3b3b3;
  margin: 0;
  padding: 0 10px;
  background-color: #fff;
  font-size: 16px;
  height: 40px;
}

ul.custom-dd .arrow {
  border: solid black;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 3px;
  position: absolute;
  right: 11px;
  top: 15px;
}

ul.custom-dd.active .arrow {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  top: 18px;
}

ul.custom-dd .arrow {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

JavaScript

$(document).ready(function() {
  var min = 1,
    max = 24,
    $ulDiv = $("ul.custom-dd");

  function toggleDD(action, $parentDiv) {
    if (!$parentDiv) return;
    if ($parentDiv.hasClass("sleep")) {
      min = 0;
      max = 10;
    } else {
      min = 4;
      max = 24;
    }
    if (action === "expand") {
      // expand drop down
      if ($parentDiv.find(".list-item").length) {
        Array.from($parentDiv.find("li.list-item")).forEach(function(
          $el
        ) {
          $el.style.visibility = "visible";
        });
      } else {
        var $liDiv = "";
        for (var i = min; i <= max; i++) {
          $liDiv += "<li class='list-item'>" + i + "</li>";
        }
        $parentDiv.append($liDiv);
      }
    } else {
      // collapse drop down
      Array.from($parentDiv.find("li.list-item")).forEach(function($el) {
        $el.style.visibility = "collapse";
      });
    }
  }

  // dropdown expand / collapse on click
  $ulDiv.on("click", function(e) {
    // check if any other ul is open, close it first
    if ($ulDiv && $ulDiv.hasClass("active")) {
      var $activeUL = $("ul.custom-dd.active");
      toggleDD("collapse", $activeUL);
      $activeUL.addClass("collapse");
      $activeUL.removeClass("active");
      if ($activeUL.is($(this))) {
        e.stopPropagation();
        return;
      }
    }

    var $targetElem = $(this);
    if ($targetElem.hasClass("collapse")) {
      toggleDD("expand", $targetElem);
      $targetElem.removeClass("collapse");
      $targetElem.addClass("active");
    } else {
      toggleDD("collapse", $targetElem);
      $targetElem.addClass("collapse");
      $targetElem.removeClass("active");
    }
  });

  // dropdown select value
  $ulDiv.on("click", "li.list-item", function(e) {
    var $parentDiv = $(this).parent();
    var $placeholderDiv = $parentDiv.find(".placeholder");
    $placeholderDiv.text($(this).text());
    $placeholderDiv.addClass("value");
    toggleDD("collapse", $parentDiv);
   ...