How to use 'click' instead of 'hover' effect

[pano pano]

i have this code that works nicely as you can see here.

here is the code:

 <div class='menu'>
    <a href='#'><div class='cat'>title1</div></a>
    <div class='sub_menu'>item1</div>
</div><div class='menu'>
    <a href='#'><div class='cat'>title2</div></a>
    <div class='sub_menu'>item2</div>
</div>
<script>
$(".cat").hover(function(){
    $(this).parent().parent().find(".sub_menu").hide();
},
function() {
    $(this).parent().parent().find(".sub_menu").show();
});   
</script>

How can i have this effect take place on 'mouse click' instead of 'mouse hover'?
I tried to edit code in many ways but can't figure out the solution.
thanks in advance

[Dormilich]

use .click() instead of .hover() ?

[pano pano]

I tried that, didn't work.

[Dormilich]

if it didn’t work, what about error messages?

[pano pano]

I don't have any (only some php errors).
Btw if i don't use <a> tags, hover effect won't work either. I don't know if that has something to do with it.

[Dormilich]

Btw if i don't use <a> tags, hover effect won't work either.

sounds like Internet Explorer.