jquery - jQuery onclick show/hide box in Wordpress

Question

The code that I attached below seems to be doing his thing, but when I include it in my Wordpress site it just won't work. So is there anything in particular that I should do to include it properly? I even tried to add it through wp_register/enqueue_script, but I still got nothing :S

Here's the code:

<style>
#drop {
    display: none;
}
</style>

<script>
$(document).ready( function(){
    $('#trigger').click( function(event){
        event.stopPropagation();
        $('#drop').toggle(); 
    });
    $(document).click( function(){
        $('#drop').hide();
    });
});
</script>

<div class="wrapper">
    <a id="trigger" href="#">Click Me</a>
    <div id="drop">Content</div>
</div>

jsfiddle

Any ideas? Thanks in advance :)

Answer 1

Make it show when click on trigger .

$(document).ready( function(){
  $('#trigger').click( function(event){
      $('#drop').show();
   });
  $(document).click( function(){
      $('#drop').hide();
   });
});

Answer 2

no conflict mode?

var j = jQuery.noConflict();

// Do something with jQuery
j( "div p" ).hide(); // instead $( "div p" ).hide();

Answer 3

I'm deeply sorry guys. I appreciate your efforts and I'm feeling pretty stupid while writing this, but it was an extremely simple mistake. I was enclosing this in one of the jQuery noConflict wrappers that Wordpress provides:

(function($) {
    // Inside of this function, $() will work as an alias for jQuery()
    // and other libraries also using $ will not be accessible under this shortcut
})(jQuery);

I got mixed up with some other functions and by mistake I erased the closing braces for this function I was trying to work out.

Deeply, deeply sorry about this >.<