Hidding UL after H2

Hidding UL after H2

I have a series of <h2>'s followed by <ul>'s, and I want to have clicking a link in the <h2>'s hide the following <ul>. Here's my approximate html:
  1. <h2><a href="#">Level 2 header</a></h2>
  2. <ul>
  3.       <li>List item</li>
  4.       <li>List item 2</li>
  5.       <li>List item 3</li>
  6. </ul>
  7. <h2><a href="#">Another level 2 header</a></h2>
  8. <ul>
  9.       <li>List item</li>
  10.       <li>List item 2</li>
  11.       <li>List item 3</li>
  12. </ul>

And he's what I have in my custom.js:
  1. jQuery('.main h2 a').click(function() {
  2.          if (jQuery(this).next('ul').is(':hidden')) {
  3.             jQuery(this).next('ul').slideDown('fast');
  4.         } else {
  5.             jQuery(this).next('ul').slideUp('fast');
  6.         }
  7.     });

This doesn't work, but doesn't work, but if I do:
  1. jQuery('.main h2').click(function() {  //only difference is that it's not targeting the "<a>", just the <h2>
  2. …
it does work. I want to have the <a> because otherwise it's not clear that it's clickable to users. What am I doing wrong?