title: Show/Hide part of the page based on dropdown choice in MVC 5
body: <p>I have a dropdown in MVC5 "view" by changing the dropdown part of the page is going to show and hide. I like to call this function in page load but is not working properly it shows all the text boxes when page loads as I don't know how to send "e" to the page load and when I change the drop down it gave me this error:</p>
  
  <pre><code>  Microsoft JScript runtime error: 'toggleDIvDisplay' is undefined
  </code></pre>
  
  <p>This is my code:</p>
  
  <pre><code>@Scripts.Render("~/bundles/jquery")
  
  &lt;script type="text/javascript"&gt;
  
  $(document).ready(
  
  function toggleDIvDisplay(e) {
  
      if (e == 1) {
          $('#divAppName').hide();
          $('#divSSN').hide();
          $('#divRemref').hide();
  
      }
  
      if (e == 2) {
          $('#divAppName').show();
          $('#divSSN').hide();
          $('#divRemref').hide();
  
      }
  
      if (e == 3) {
          $('#divSSN').show();
          $('#divAppName').hide();
          $('#divRemref').hide();
      }
  
  
      if (e == 4) {
          $('#divRemref').show();
          $('#divSSN').hide();
          $('#divAppName').hide();
  
      }
  </code></pre>
  
  <p>and this is dropdown:</p>
  
  <pre><code>Search By: @Html.DropDownList("ddl", (SelectList)ViewBag.DropDownValues, new   { @onchange = "toggleDIvDisplay(this.value)" })
  </code></pre>
  
  <p>thanks everyone for the answer.
  Solution is to add this lines:</p>
  
  <pre><code> $(document).ready(function () {
      toggleDIvDisplay(1);
  });
  </code></pre>