JSFiddle - React, Tailwind, and code Playground

by chintansoni

HTML

<script src="http://tympanus.net/Development/SimpleDropDownEffects/js/jquery.dropdown.js"></script>
<link rel="stylesheet" href="http://tympanus.net/Development/SimpleDropDownEffects/css/style1.css">
<script src="http://tympanus.net/Development/SimpleDropDownEffects/js/modernizr.custom.63321.js"></script>
<div>
        <div style='float:left;width:250px;'>
<select id="Select1"  name="cd-dropdown" class="cd-select">
    <option value="-1" selected>The drop down menu</option>
    <option value="1" class="icon-monkey">Choice 1</option>
    <option value="2" class="icon-bear">Choice 2</option>
    <option value="3" class="icon-squirrel">Choice 3</option>
    <option value="4" class="icon-elephant">Choice 4</option>
</select>
    </div>
    <div style='float:left;width:150px;padding-top:170px;'>
<select id="Select2" name="cd-dropdown" class="cd-select">
    <option value="-1" selected>The drop down menu</option>
    <option value="1" class="icon-monkey">Choice 1</option>
    <option value="2" class="icon-bear">Choice 2</option>
    <option value="3" class="icon-squirrel">Choice 3</option>
    <option value="4" class="icon-elephant">Choice 4</option>
</select>
    </div>
</div>

JavaScript

// hide drop down using .not() function
//http://stackoverflow.com/questions/25934193/how-to-close-first-dropdown-when-user-click-on-second-dropdown
$(function () {
    $('#Select1').dropdown({
        gutter: 1,
        stack: false
    });
    $('#Select2').dropdown({
        gutter: 1,
        stack: false
    });
    $('#Select2').on('click', function(){
        $('.cd-dropdown').removeClass('cd-active');
    });
});