title: Contact Form 7: display/hide div on selection
body: <p>i'm following this post <a href="https://stackoverflow.com/questions/21310114/jquery-show-hide-div-with-contact-form-7-dropdown-menu-select-field">jquery show-hide DIV with CONTACT FORM 7 dropdown menu (select field)</a>
  to create a display/hide depending on selection. </p>
  
  <p>I just created the form, but then how to implement the jquery function? I've to create a html, head, body tags in the contact form 7 page? Beacause i'm trying but does not works.</p>
  
  <pre><code>&lt;select id="reason"&gt;
  &lt;option&gt;...&lt;/option&gt;
  &lt;option value="I want to hire you"&gt;I want to hire you&lt;/option&gt;
  &lt;option value="I want to ask you a question"&gt;I want to ask you a question&lt;/option&gt;
      &lt;option value="I want to say hello"&gt;I want to say hello&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div id="I want to hire you" class="note"&gt;I am currently available&lt;/div&gt;
  &lt;div id="I want to ask you a question" class="note"&gt;Feel free to ask&lt;/div&gt;
  &lt;div id="I want to say hello" class="note"&gt;Get in touch&lt;/div&gt;
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$('.note').hide();
  $(document).on("change", "#reason", function () {
  $('.note').hide();
  var neededId = $(this).val();
  var divToShow = $(".note").filter("[id='" + neededId + "']");
  divToShow.show();
  });
  </code></pre>
  
  <p>EDIT:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script&gt;
  $('.note').hide();
  
  $(document).on("change", "#reason", function () {
  $('.note').hide();
  var neededId = $(this).val();
  var divToShow = $(".note").filter("[id='" + neededId + "']");
  divToShow.show();
  });
  &lt;/script&gt;
  &lt;body&gt;
  &lt;select id="reason"&gt;
  &lt;option&gt;...&lt;/option&gt;
  &lt;option value="I want to hire you"&gt;I want to hire you&lt;/option&gt;
  &lt;option value="I want to ask you a question"&gt;I want to ask you a question&lt;/option&gt;
  &lt;option value="I want to say hello"&gt;I want to say hello&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div style="display: none;" id="I want to hire you" class="note"&gt;I am currently available&lt;/div&gt;
  &lt;div style="display: none;" id="I want to ask you a question" class="note"&gt;Feel free to ask&lt;/div&gt;
  &lt;div style="display: none;" id="I want to say hello" class="note"&gt;Get in touch&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>