javascript - jQuery toggle children of div

Question

I have the following HTML code:

<div class="dim">
    Menu
        <div class='hidden'>submenu1</div>
        <div class='hidden'>submenu2</div>
</div>
<div class="dim">
    Menu2
        <div class='hidden'>submenu3</div>
        <div class='hidden'>submenu4</div>
</div>

class hidden has display:none

I'm trying to get the toggle to work when I click on the word menu or menu2

Answer 1

$('.dim').click(function(){
    $('.hidden', this).toggle(); // p00f
});

Fiddle: http://jsfiddle.net/maniator/V4X4t/

---

Update

Checks for dim element being clicked:

$('.dim').click(function(event){
    
    var isDim = $(event.target).is('.dim');
    if(isDim){ //make sure I am a dim element
        $('.hidden', this).toggle(); // p00f
    }
    
});

Fiddle: http://jsfiddle.net/maniator/V4X4t/5/