title: Visible/hide div with jquery when checkbox checked
body: <p>I have a script that makes <strong>a div visible or hidden when I check a checkbox</strong> (works perfectly). For example: product has discount <em>check</em> --> show div to enter a discount price.</p>
  
  <p>When loading the detail page, the checkbox is checked/unchecked according to the property "isAvailable". <strong>When it's checked by default, it doesn't show the div!</strong> Unless you click on the checkbox twice and check it manually.</p>
  
  <p>This is my script:</p>
  
  <pre><code>   $("#DiscountCheckbox").change(function () {
              if ($(this).is(':checked')) {
                  document.getElementById("percentageDiv").style.visibility = "visible";
                  $("#percentageDiv").fadeIn(200);
              }
              else {
                  $("#percentageDiv").fadeOut(200);
                  document.getElementById("percentageDiv").style.visibility = "hidden";
              }
          });
  </code></pre>
  
  <p>This is the html:</p>
  
  <pre><code>&lt;div class="form-group"&gt;
    @Html.CheckBoxFor(p =&gt; p.Product.Price.IsActive, new { @class = "filled-in", id = "DiscountCheckbox" })
    &lt;label for="DiscountCheckbox" title="Add a discount to this product"&gt;add discount&lt;/label&gt;
  &lt;/div&gt;
  
  &lt;!-- div that is visible/hidden --&gt;
  &lt;div class="form-group" id="percentageDiv"&gt;
  &lt;label class="control-label" for="txtboxCustomerRef"&gt;Discount name:&lt;/label&gt;
  @Html.TextBoxFor(p =&gt; p.Discount.DiscountName, new { placeholder = "enter discount name", @class = "form-control", id = "DiscountName", title = "Enter a name for this discount" })
  &lt;/div&gt;
  </code></pre>
  
  <p>I tried to set this in de document ready but didn't work for me, maybe I didn't do it right:</p>
  
  <pre><code>     $(function () {
          if ($("#DiscountCheckbox").is(':checked')) {
              document.getElementById("percentageDiv").style.visibility = "visible";
              $("#percentageDiv").fadeIn(200);
          }
          else {
              $("#percentageDiv").fadeOut(200);
              document.getElementById("percentageDiv").style.visibility = "hidden";
          }
  
  
      });
  </code></pre>