JSFiddle - React, Tailwind, and code Playground

by dhavaljani

HTML

<div id="container"> 
    <span class="arrow">&or;</span> <span class="default">Choose your option...</span>
    <input type="hidden" value="" class="mehidden"/>
    <ul class="selectBox">
        <li>One<strong> 1</strong><span>first item</span></li>
        <li>Two<strong> 2</strong><span>second item</span></li>
        <li>Three<strong> 3</strong><span>third item</span></li>
    </ul>
</div>

CSS

.arrow
{
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #CCCCCC;
    font-size: 0.8em;
    font-weight: bold;
    height: 26px;
    left: 208px;
    line-height: 26px;
    position: absolute;
    text-align: center;
    vertical-align: middle;
    width: 26px;
    z-index: 100;
}

.selectBox
{
    border: 1px solid #ccc;
    list-style-type: none;
    margin: 0;
    padding: 3px;
    position: absolute;
    width: 200px;
    display:none;
    top: 25px;
}

#container
{
    position:relative
}

.toggler
{
    overflow:visible;
}

.default
{
    border: 1px solid #ccc;
    width:200px;
    height:20px;
    padding:3px;
    position:absolute
}

.selectBox li:hover
{
    background:#ddd
}
ul li span {
    display: block;
}

JavaScript

$('.arrow').click(function() {
    $('.selectBox').slideToggle(200).css('borderTop', 'none');
    $('.selectBox li').click(function() {
        $('.mehidden').text($(this).text());
        $('.default').text($(this).text());
        $('.selectBox').slideUp(200);
    });
});