Enqueue javascript file

Hi,

I’m building a theme and want to include a toggle form.
Form is displayed onclick:

<div id="header-search"><?php _e( 'Search', 'textdomain' ); ?></div>
<form id="header-search-form" style="display:none"><?php get_search_form(); ?></form>

<script>
$( "#header-search" ).click(function() {
	$( "#header-search-form" ).toggle();
});
</script>

Because I don’t want to include .js in my php template files I want to replace it to a separate file and call it from my functions file:

wp_enqueue_script( 'head-search', get_template_directory_uri() . '/js/head-search.js', array( 'jquery' ) );

So I have created a .js file called ‘head-search’ and added it to my /js theme folder. It contains:

jQuery(document).ready(function() {
	$( "#header-search" ).click(function() {
		$( "#header-search-form" ).toggle();
	});
});

Enqueue is loaded in my head but toggle doesn’t work.

I guess the .js should be adjusted for external use?

Guido