JSFiddle - React, Tailwind, and code Playground

by callmepc

HTML

<h2>Following is a sample drop down:</h2>
<br/>

<div class="dd-container">
    
    <div class="dd-select">
        <input class="dd-selected-id" type="hidden" value="0" />
        <a class="dd-selected">
            Select your preferred social network
        </a>
        <span class="pointer pointer-down"></span>
    </div>
    
    <ul class="dd-options">
    <!--You can use your repeater itemtemplate to populate dropdown data-->
        <li>
            <a class="dd-option" href="#">
                <input class="dd-option-id" type="hidden" value="1" />    
                <img src="http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png" />
                <label>Facebook</label><br/>
                <small class="weak">Description with facebook</small>
            </a>
        </li>
        <li>
            <a class="dd-option" href="#">
                <input class="dd-option-id" type="hidden" value="2" />    
                <img src="http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png" />
                <label>Twitter</label><br/>
                <small class="weak">Description with Twitter</small>
            </a>
        </li>
          <li>
            <a class="dd-option" href="#">
                <input class="dd-option-id" type="hidden" value="3" />    
                <img src="http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png" />
                <label>LinkedIn</label><br/>
                <small class="weak">Description with LinkedIn</small>
            </a>
        </li>
        <li>
            <a class="dd-option" href="#">
                <input class="dd-option-id" type="hidden" value="4" />    
                <img src="http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png" />
                <label>Foursquare</label><br/>
                <small class="weak">Description with Foursquare</small>
            </a>
        </li>
    </ul>

</div>

CSS

body{ font-family:Helvetica; padding:20px; font-size:12px;}
.dd-select{
    width:260px;    
    border-radius:2px;
    border:solid 1px #ccc;
    position:relative;
    cursor:pointer;
}
.dd-selected
{
    overflow:hidden;
    display:block;
    background:#eee;
    padding:10px;
    width:240px;
    font-weight:bold;
}
.pointer
{
    width:0;
    height:0;
    position:absolute;
    right:10px;
    top:50%;
    margin-top:-3px;
}
.pointer-down
{
    border:solid 5px transparent;    
    border-top:solid 5px #000;   
}
.pointer-up
{
    border:solid 5px transparent !important;    
    border-bottom:solid 5px #000 !important;    
    margin-top:-8px;
}

.dd-options
{
    border:solid 1px #ccc;
    border-top:none;
    list-style:none;
    width:260px;
    box-shadow:0px 1px 5px #ddd;
    display:none;
}
a.dd-option
{
    width:240px;
    padding:10px;
    display:block;
    border-bottom:solid 1px #ddd;
    overflow:hidden;
    text-decoration:none;
    color:#333;
}
.dd-options > li:last-child > .dd-option
{
    border-bottom:none;
}
.dd-option:hover
{
    background:#f3f3f3;
    color:#000;
}
.dd-option img, .dd-selected img
{
    float:left;
    margin-right:5px;
}
.weak
{
    color:#aaa;
    font-weight:normal;
}

JavaScript

//Displaying options
$('.dd-select').on('click', function(){
    var $this = $(this);
    
    //Toggle dropdown options
    $this.siblings('.dd-options').slideToggle('fast');
    
    //Toggle pointer diredction
    $this.find('.pointer').toggleClass('pointer-up');
});

//Selecting an option
$('.dd-option').on('click',function(){
    var $this = $(this);
    
    //Update the selected text/html
    var ddSelected = $this.closest('.dd-container').find('.dd-selected');
    ddSelected.html($this.html());
    
    //Toggle pointer direction
    var pointer = ddSelected.siblings('.pointer').toggleClass('pointer-up');        
    
    //Updating selected option id
    var optionId = $this.find('.dd-option-id').val();
    ddSelected.siblings('.dd-selected-id').val(optionId);
    
    //Close dropdown
    $this.closest('.dd-options').slideToggle('fast');
});