JSFiddle - React, Tailwind, and code Playground

by defmetalhead

HTML

<label for="c-19">Food Options:</label>
<div class="cContainer">
	<div class="cDropdown">
		<div class="downArrow"></div>
		<h4>Select Options</h4>
	</div>
	<div class="multiCheckboxes stick">
        <input type="checkbox" name="c-19" id="gluten" value="gluten" class="stick"/>Gluten Free<br />
		<input type="checkbox" name="c-19" id="vegan" value="vegan" class="stick"/>Vegetarian<br />
		<input type="checkbox" name="c-19" id="organic" value="organic" class="stick"/>Organic<br/>
	</div>
</div>
<div class="greenCheck"></div>

CSS

label {
    clear: left;
    float: left;
    line-height: 22px;
    width: 6.6em;
}

h4 {
     margin: 0;   
}

.cContainer {
    float: left;
    margin: 0 0 5px;
    position: relative;
}

.cDropdown {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 2px inset #D3D3D3;
    padding: 4px 3px;
    width: 150px;
}

.cDropdown {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 2px inset #D3D3D3;
    padding: 4px 3px;
    width: 150px;
}

.downArrow {
    border-left: 8px solid rgba(0, 0, 0, 0);
    border-right: 8px solid rgba(0, 0, 0, 0);
    border-top: 8px solid #3C3C3C;
    float: right;
    height: 0;
    margin: 3px 0 0 3px;
    width: 0;
}

.multiCheckboxes {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #3C3C3C;
    display: none;
    left: 0;
    max-height: 200px;
    overflow: auto;
    padding: 5px;
    position: absolute;
    top: 25px;
    width: 146px;
    z-index: 999;
}

.greenCheck {
    height:  25px;
    width: 25px;
    background: green;
    float: left;
    margin: 2px 5px;
    display: none;
}

JavaScript

$('.cDropdown').on('click', function (e) {
	$('.multiCheckboxes').slideUp(50)
	e.stopPropagation();
	currentDrop = $(this).siblings('.multiCheckboxes');
	currentDrop.stop().slideToggle();
});
$('input:checkbox[name="c-19"]').on('change', function (event) {
	var checkIfChecked = $('input:checkbox[name="c-19"]:checked').length;
	if (checkIfChecked > 0) {
		$('input:checkbox[name="c-19"]').parent().parent().next().show();
	}
	else {
		$('input:checkbox[name="c-19"]').parent().parent().next().hide();
	}
});