How to do Fadein/FadeOut by Selecting the radio button text?

Question

Hi Is it possible to do fade-in and fade-out by selecting the text of radio buttons . I will explain my issue clearly.

Fade-in Fade-out Fields

If i select Visit Type as Direct Visit it will show StartTime and EndTime otherwise it wont show these two fields. Now all are working fine. Now what i want is i want to show the fields also by selecting the text of radio button

Selecting Text 

That is if i go and click over on text (that is Direct Visit not inside of radio button circle)it automatically select in inside of circle and have to show the fields (Start Time and EndTime). I tried to explain my issue as per my level best . please any one tell me it is possible to show the fields depend upon by selecting the radio button text in mvc4.

 My View Code

 

<div class="col-sm-4" id="VisitType">

<div class="form-group">

<span style="color: #f00">*</span>

@Html.Label("Visit Type", new { @class = "control-label" })

@Html.RadioButtonFor(model => model.VisitType, "true", new { id = "" }) Telephone

@Html.RadioButtonFor(model => model.VisitType, "false", new { id = "" }) Direct Visit

</div>

</div>

<div id="StartTime">

<div class="col-sm-3">

<div class="form-group">

@Html.Label("Start Time", new { @class = "control-label" })

@Html.TextBoxFor(model => model.StartTime, new { @class = "form-control ", type = "text" })

@Html.ValidationMessageFor(model => model.StartTime)

</div>

</div>

<div class="col-sm-3">

<div class="form-group">

@Html.Label("End Time", new { @class = "control-label" })

@Html.TextBoxFor(model => model.EndTime, new { @class = "form-control ", type = "text" })

@Html.ValidationMessageFor(model => model.EndTime)

</div>

</div>

</div>

 

My J-query code

 

 

  

$(document).ready(function () {

$('#StartTime').hide();

$('#VisitType input[type="radio"]').change(function () {

if ($(this).val() === 'false') {

$('#StartTime').show();

}

else

{

$('#StartTime').hide();

}

});

});