JSFiddle - React, Tailwind, and code Playground
by KelseyW
HTML
<a href="#" id="clickable">Test Pop
</a>
<div id="popup">
<li><span>Select</span></li>
<li>
<label class="list_field_filter_resource_label">
<input checked="checked" name="test" type="radio" value="test1" maxlength="0"> test1</label>
<label class="list_field_filter_resource_label">
<input name="test" type="radio" value="test2" maxlength="0"> test2</label>
<label class="list_field_filter_resource_label">
<input name="test" type="radio" value="test3" maxlength="0"> test3</label>
</li>
</div>
<br><br>
<a href="#" id="clickable2">Test Pop2
</a>
<div id="popup2">
<li><span>Select</span></li>
<li>
<label class="list_field_filter_resource_label">
<input checked="checked" name="test2" type="radio" value="test1" maxlength="0"> test1</label>
<label class="list_field_filter_resource_label">
<input name="test2" type="radio" value="test2" maxlength="0"> test2</label>
<label class="list_field_filter_resource_label">
<input name="test2" type="radio" value="test3" maxlength="0"> test3</label>
</li>
</div>
CSS
#clickable:focus, #clickable2:focus {
text-decoration: underline;
}
#popup, #popup2 {
display: none;
}
JavaScript
$("#clickable").click(function() {
$('#popup').css('display', 'block');
});
$("#popup input:radio").click(function() {
$('#popup').css('display', 'none');
});
$("#clickable2").click(function() {
$('#popup2').css('display', 'block');
});
$("#popup2 input:radio").on('keydown', function (event) {
if (event.keyCode == '13') {
$('#popup2').css('display', 'none');
}
});
$("#popup2 input:radio").mousedown(function() {
$('#popup2').css('display', 'none');
});