Dynamic <div> styles

I have this function to show or hide a control depending on which radio button is selected(Yes = visible, No = invisible). This works fine.

However, in the spirit of reusing code I need to make some adjustments to allow the <div> to be visible if either the "yes" radiobutton is checked or if the datefield has a value. And invisible if the radiobutton is "no" or the datefield does not have a value.This would need to happen when the page loaded as it was populating other fields. I am using the same page to collect data and edit records. Could someone point me in the right direction to accomplish this? TIA


<script type = "text/javascript">
<!--
function hide(x) {
document.getElementById(x).style.visibility="hidden";
}
function show(x) {
document.getElementById(x).style.visibility="visible";
}
//-->
</script>

<cfinput type="radio" id="listoncalendar2" name="listoncalendar" value="No" onClick="hide('showhidelistoncalendardate')" checked="#listoncalendar2_Checked#">No
<cfinput type="radio" id="listoncalendar1" name="listoncalendar" value="Yes" onClick="show('showhidelistoncalendardate')" checked="#listoncalendar1_Checked#" >Yes
<div id="showhidelistoncalendardate" style="visibility:hidden">Select date:<br>
<cfinput type="datefield" name="listoncalendardate" <!--- value="#getlastedit.listoncalendardate#" ---> > </div>