Mohammad Areeb Siddiqui Mohammad Areeb Siddiqui - 2 months ago 8
CSS Question

Click() not working

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

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

Comments