jQuery toggle children of div

Answer 1

Create anchors at Menu and Menu2

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

and script:

$(".dim > a").click( function ( e ){ 
   e.preventDefault() // prevent default action - hash doesn't appear in url
   $( this ).parent().find( "div" ).toggleClass( "hidden" );
});

When click anyone of link submenu belonging to it will will appear or disappear

Live demo: http://jsfiddle.net/ZxwpJ/

Answer 2

$('.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/

Answer 3

Simply attach a click event handler, and check if the current element is the one that was clicked:

$('.dim').click(function(e)
{
    if (e.target == this)
    {
        $(this).children().toggle();
    }
});

Here's the fiddle: http://jsfiddle.net/V4X4t/6/

Answer 4

$('.dim').on('click', function () {
    //$(this).children('.hidden').toggleClass('.hidden');//as-per AndreasAL's suggestion
    $(this).children('.hidden').toggle();
});

$('.hidden').on('click', function (event) {
    event.stopPropagation();
});

Here is a demo: http://jsfiddle.net/76uTr/

This shows/hides the .hidden elements when clicking on a .dim element but it also allows you to click on a .hidden element and not toggle it's visibility.

Notice that I used .children() instead of .find() which will only select direct descendants of the root element (.dim).

Also note that .on() is new in jQuery 1.7 and in this case is the same as .bind().

UPDATE

Using event.stopPropagation() we can allow ourselves to nest elements and not let events bubble-up and trigger multiple event handlers:

$('.dim').on('click', function (event) {
    event.stopPropagation();
    $(this).children('.hidden').toggle();
});

$('.parent').on('click', function () {
    $(this).children('.dim').toggle();
});

$('.hidden').on('click', function (event) {
    event.stopPropagation();
});

Here is a demo: http://jsfiddle.net/76uTr/1/

Here the .parent element is assumed to be the direct parent of the .dim elements.

Answer 5

take a look at this tutorial which may give you an idea