title: Show/Hide div with JQuery depending on Dropdown list selected value
body: <p>I have read existing questions however they do not seem to resolve my problem.
  I would like to be able to hide the div "answer_wrapper" when the option "Open Ended" is selected for the drop down list.</p>
  
  <p>I have written some code, however when I run the solution nothing appears to happen when selecting the "Open Ended" option in the drop down list.</p>
  
  <p>Any help would be much appreciated.</p>
  
  <pre><code>$(function () 
  {
      $("#QuestnType").change(function () 
      {
          ToggleDropdown();
      });
      ToggleDropdown(); 
  });
  function ToggleDropdown() 
  {
      if ($("#QuestnType").val() == "Open Ended") 
      {
          $("#answer_wrapper").hide();
      }
      else 
      {
          $("#answer_wrapper").show();
      }
   };
  </code></pre>
  
  <p>The drop down list</p>
  
  <pre><code>&lt;asp:DropDownList runat="server" ID="QuestnType" CssClass="form"&gt;
      &lt;asp:ListItem Value="1"&gt;Check Boxes&lt;/asp:ListItem&gt;
      &lt;asp:ListItem Value="2"&gt;Drop Down&lt;/asp:ListItem&gt;
      &lt;asp:ListItem Value="3"&gt;Open Ended&lt;/asp:ListItem&gt;
      &lt;asp:ListItem Value="4"&gt;Radio Buttons&lt;/asp:ListItem&gt;
  &lt;/asp:DropDownList&gt;
  &lt;div id="answer_wrapper"&gt;
      some code here
  &lt;/div&gt;
  </code></pre>
  
  <p>Where am I going wrong?</p>