simple jQuery help

Hello,

I thought I’d try out some simple jQuery and ran into a wall…

Help me out here, please! The example I chose was hiding a div.

My theme already has a js folder, so I’ll add my js for this e.g into a subfolder called hidediv…

Files in play:

theme/js/hidediv/animatedcollapse.js //The script from the link above which I wrapped in jQuery(document).ready(function(){...};
theme/js/hidediv/divs2hide.js // see below:

jQuery(document).ready(function(){
	animatedcollapse.addDiv('postmetadiv','hide=1');
	animatedcollapse.init();
};

theme/header.php has these two lines added to it:

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/hidediv/animatedcollapse.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/hidediv/divs2hide.js"></script>

In my single.php file, I wrapped the area that I wanted to hide (holds the post metadata) in a div called “postmetadiv”.
Just above the postmetadiv div, I placed the image link I want to use to toggle the hide/unhide.

<a href="javascript:animatedcollapse.toggle('postmetadiv');"><img src="/wp-content/uploads/icons/info.png" alt="Toggle Author and Post Information" width="32" height="32" border="0" /></img></a>
<div id="postmetadiv">blah blah blah</div>

No Joy! Apparently “animatedcollapse is not defined”.
Huh?