title: On radio button check/uncheck, load/hide partial view
body: <p>I want to load or hide partial view whenever a radio button is checked or unchecked. I currently am kind of blank on what should I do.
  I currently have this in view</p>
  
  <pre><code>@Scripts.Render("~/bundles/jquery")
  @Scripts.Render("~/bundles/bootstrap")
  @Scripts.Render("~/bundles/jqueryval")
  @using (Html.BeginForm("Index", "Response", FormMethod.Post))
  {     
              &lt;div class="form-group"&gt;
                  &lt;div class="input-group"&gt;
                      @Html.EditorFor(m =&gt; m.Isattending, "RadioButtonQuestion")
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
  }
  &lt;div id="provideDateTime"&gt;
     //load partial view here
  &lt;/div&gt;
  
  &lt;script&gt;
      $(document).ready(function () {
          $('input:radio[name=Isattending_0]').change(function () {
  
              if ($("#Isattending_0").is(':checked')) {
                  //show partial view. 
                  //should call a method in controller that renders partial view
                  //don't know what to do
              }
              else {
                  //hide partial view
              }
          })
  
      })
  
      &lt;/script&gt;
  </code></pre>
  
  <p>The editfor helper generates two radio buttons with id <code>Isattending_0</code> and <code>Isattending_1</code>, whenever the Isattending_0 is checked the partial view should be shown, and upon uncheck the partial view should be hidden, and by default it is checked.</p>
  
  <p>This is method in controller that should be called from above script</p>
  
  <pre><code>[HttpGet]
  public ActionResult AttendeeAvailability(Guid appointmentId, Guid attendeeId)
  {
      var attendeeAvailability = new AttendeeAvailableDateTime
      {
          AppointmentId = appointmentId,
          AttendeeId = attendeeAvailability
      };
      return View(attendeeAvailability);
  }
  </code></pre>
  
  <p>PS: I tried to show/ hide a text(Hello world) inside the div <code>provideDateTime</code> for a start with following javascript code, but it didn't work, the text hello world always appeared, even if the radiobutton is checked or unchecked</p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function () {
          $('input:radio[name=Isattending_0]').change(function () {
  
              if ($("#Isattending_0").is(':checked')) {
                  $("#provideDateTime").show();
              }
              else {
                  $("#provideDateTime").hide();
              }
          })
  
      })
  
      &lt;/script&gt;
  </code></pre>
  
  <p>Rendered Html in browser for radio buttons
  <img src="https://i.stack.imgur.com/KuVBC.png" alt="enter image description here"></p>