how to show/hide form elements

This should get you started:

<script type="text/javascript">
function addRangeDiv() {
var sr = document.getElementById('single_or_range');
var newdiv = document.createElement('div');
var rangeDiv = document.getElementById('range');
var singleDiv = document.getElementById('single');
sr.removeChild(singleDiv);
  if (!rangeDiv) {
  newdiv.setAttribute('id','range');
  newdiv.innerHTML = '<input type="text" name="start_date" id="start_date">To:  <input type="text" name="end_date" id="end_date">';
  sr.appendChild(newdiv);
  }
}

function addSingleDiv() {
var sr = document.getElementById('single_or_range');
var newdiv = document.createElement('div');
var rangeDiv = document.getElementById('range');
var singleDiv = document.getElementById('single');
  sr.removeChild(rangeDiv);
if (!singleDiv) {
  newdiv.setAttribute('id','single');
  newdiv.innerHTML = '<input type="text" value="" name="single_date" id="single_date">';
  sr.appendChild(newdiv);
  }
}
</script>

<cfif isdefined("form.fieldnames")>
    <cfdump var="#form#">
</cfif>

<cfoutput><form action="#cgi.SCRIPT_NAME#" method="post" id="myForm"></cfoutput>
<input type="radio" name="date_type" value="1" checked="checked"  onclick="javascript: addSingleDiv()"><b>Single Date</b>

          <input type="radio" name="date_type" value="2" onclick="javascript: addRangeDiv()"><b>Date Range</b>
            <div id="single_or_range">          
                   <div id="single">
                     <input type="text" value="" name="single_date" id="single_date">
                    </div>
             </div>        
           
<input type="submit" value="Send" name="sbmt">            
</form>

I often use a different approach, especially if these form elements are generated dynamically.  The gist of it is to:

1.  Use cfsavecontent to produce variables with the html content I need.

2.  Use toScript to pass these variables to javascript

3.  Write a js function that changes the value of a single div.

Google and you shall find.