title: show-hide DIV with CONTACT FORM 7 on Selectable Recipient with Pipes
body: <p>Borrowing code from this link:
  <a href="http://wordpress.org/support/topic/plugin-contact-form-7-this-is-how-to-showhide-fields-with-jquery?replies=8" rel="nofollow">http://wordpress.org/support/topic/plugin-contact-form-7-this-is-how-to-showhide-fields-with-jquery?replies=8</a></p>
  
  <p>I created the following, but because the value has a pipe character, it isn't working. When I remove the pipe, it functions properly. I tried escaping but that didn't work. Any thoughts? </p>
  
  <p>My HTML code in the Contact Form 7 plugin</p>
  
  <pre><code>&lt;p&gt;Your Name (required)&lt;br /&gt;
  [text* your-name] &lt;/p&gt;
  
  &lt;p&gt;Your Email (required)&lt;br /&gt;
  [email* your-email] &lt;/p&gt;
  
  &lt;label for="recipient"&gt;Choose your interest&lt;/label&gt;
  [select* recipient id:recipient include_blank 
   "events|events@example.com"
   "custom orders|customorders@example.com"]
  
   &lt;div class="hide" id="hide1"&gt;
   &lt;label for="event-type"&gt;Type of Event&lt;/label&gt;[text event-type /50 id:event-type]
   &lt;/div&gt;
  
   &lt;p&gt;Your Message&lt;br /&gt;
   [textarea your-message] &lt;/p&gt;
  
   &lt;p&gt;[submit "Send"]&lt;/p&gt;
  </code></pre>
  
  <p>My jQuery script:</p>
  
  <pre><code>$(document).ready(function() {
  
      //Hide the field initially
      $("#hide1").hide();
  
      //Show the text field only when the third option is chosen - this doesn't
      $('#recipient').change(function() {
              if ($("#recipient").val() == "events|events@example.com") {
                      $("#hide1").show();
              }
              else {
                      $("#hide1").hide();
              }
      });
  });
  </code></pre>