jQuery function not working

Question

I have a very simple jQuery function that is supposed to toggle a div's visibility:

jQuery( ".signUp" ).click(function() {
    $('.signUpForm').toggle();
});

The HTML is a simple signup form (hidden fields left out for brevity):

<p><a class="signUp" href="#">Sign Up!</a></p>
<div class="signUpForm">
    <h3 class="title">Join our email list!</h3>
        <form action="<url goes here>" method="POST">
        <label for="email">Email:</label><input type="text" id="email" name="Email"/></br><br />
        <input type="Submit" value="Submit" /><br />
    </form>
</div>

The script looks like it was enqueued properly, but it's not working on the WP page. It does work just fine on JSFiddle (http://jsfiddle.net/danromanchik/6taton4p/).

Any ideas what I'm doing wrong?

Thanks.

Answer 1

You need to wrap your jQuery click event in a DOM ready function.

(function($) {
    $('.signUp').click(function() {
        $('.signUpForm').toggle();
    });
})(jQuery);

Answer 2

You need to add your script though:

1. Using wp_enqueue_script() in themes function.php or
2. Use wp_footer action to add your jQuery script.

If your html in a shortcode then register your script using wp_register_script('YOUR_HANDLE_NAME)

and use wp_enqueue_script('YOUR_HANDLE_NAME)

Hope It helps...