JSFiddle - React, Tailwind, and code Playground

by kenyboy9

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<select id="colors" class="select_style">
  <option value="blue">Blue</option>
  <option value="red">Red</option>
  <option value="green">Green</option>
</select>

CSS

div#colorsToggle
{
    display:block;
    padding:5px;
    border:1px solid black;

}

.select_style{
  position: absolute; 
 }

JavaScript

$(function(){
    $.fn.extend({
        slidingSelect: function(options)
        {
            var select= $(this);
            var selector=select.selector;

            var selectedValue=select.val();

            if(selectedValue=="undefined")
                selectedValue=select.find("option:first").val();                

            var divToggle=$("<div>"+selectedValue+"</div>").attr({id:select.attr("id")+"Toggle"}).css({width:select.width()}).click(function(){
                $(selector).slideToggle();
            }).insertBefore(select);

            select.attr("size",6);  
            select.change(function(){
                divToggle.html(select.val());
                $(selector).slideToggle();
            });

        }       
    });
    $("#colors").hide().slidingSelect();

});