show-hide DIV with CONTACT FORM 7 on Selectable Recipient with Pipes

[admin]

Borrowing code from this link:
<a href="http://wordpress.org/support/topic/...-how-to-showhide-fields-with-jquery?replies=8" rel="nofollow">http://wordpress.org/support/topic/...-how-to-showhide-fields-with-jquery?replies=8</a>

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?

My HTML code in the Contact Form 7 plugin

<p>Your Name (required)<br />
[text* your-name] </p>

<p>Your Email (required)<br />
[email* your-email] </p>

<label for="recipient">Choose your interest</label>
[select* recipient id:recipient include_blank 
 "events|[email protected]"
 "custom orders|[email protected]"]

 <div class="hide" id="hide1">
 <label for="event-type">Type of Event</label>[text event-type /50 id:event-type]
 </div>

 <p>Your Message<br />
 [textarea your-message] </p>

 <p>[submit "Send"]</p>

My jQuery script:

$(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|[email protected]") {
                    $("#hide1").show();
            }
            else {
                    $("#hide1").hide();
            }
    });
});