Click() not working

Question

I have number of divs on my page of 2 types. The 1st type is "main item" the second is the "sub item". I hid the subitems using css and I want to show them back when we click on the main item. I have tried but its not working.

HTML

<div class="item">
    Item 1
    <div class="sub-item">  
        Sub Item 1
    </div>
</div>
<div class="item">
    Item 2
    <div class="sub-item">  
        Sub Item 2
    </div>
</div>
<div class="item">
    Item 3
    <div class="sub-item">  
        Sub Item 3
    </div>
</div>
<div class="item">
    Item 4
    <div class="sub-item">  
        Sub Item 4
    </div>
</div>
<div class="item">
    Item 5
    <div class="sub-item">  
         Sub Item 5
    </div>
</div>

CSS

.menu .item {
    color: White;
    width: 250px;
    vertical-align: middle;
    line-height: 35px;
    color:black;
}

.menu .sub-item {
    margin-left: 15px;
    display:none;
}

JS/jQuery

$(".item").click(function() {
    $(this).child().show();
});

Also, here is the fiddle : jsFiddle

Answer 1

You can try this

jQuery(document).delegate('.item', 'click', function(e) {
   $('.sub-item', this).show();
});   

Answer 2

Your jsfiddle was missing a few things. First you didn't have the jQuery library selected. Second you need to be running your jQuery in the document.Ready event, otherwise jQuery isn't defined yet.

Here is an updated fiddle.

    $(document).ready(function() {
        $(".item").click(function () {
            $(this).children('.sub-item').show();
        });
    });

You can use the .children() method in jQuery to select child elements, but as others mentioned .child() is not a method.

Answer 3

There's no child function. You might have want to use children but it's cleaner to be more selective. Use this :

$(".item").click(function() {
    $('.sub-item', this).show();
});

Demonstration