Adressing child <a> in <h2>

Adressing child <a> in <h2>

Hi everybody,

I just got to know jQuery yesterday, it's great!

But the first question didn't take long to appear, here it is:

Right now the full <h2> bar is clickable to toggle the content, but I only want the content to toggle, when the <a> link within the <h2> is clicked.

Here is the code-snippet:

...
<script type="text/javascript"> //<![CDATA[   
   $(document).ready(function(){
      $("div.toggleable").show();
      $("h2.toggle").click(function(){
         $(this).next('div.toggleable').slideToggle("slow");
         if($(this).hasClass('toggleOn')) {
            $(this).removeClass('toggleOn');
         } else {
            $(this).addClass('toggleOn');
         }
         return false;
      });
   });
//]]></script>

...

<h2 class="toggle"><a href="#"><img src="click.png" /></a></h2>
<div class="toggleable">Lorem Ipsum</div>


This didn't work at all, like I thought it should:

$("h2.toggle > a").click(function(){


Many thanks in advance