I'm attempting to create a "filterable" list of items. The user should be able to click on a list element (the parent), which would hide all other parent elements and show the "children".

An example of the html is:

<ul class='parent_list'>
    <li>Parent 1</li>
        <ul class='child_list'>
            <li>Child 1</li>
            <li>Child 2</li>
        </ul>
    </li>
    <li>Parent 2</li>
        <ul class='child_list hidden'>
            <li>Child 1</li>
            <li>Child 2</li>
        </ul>
    </li>
</ul>

My jQuery code is:

$('.parent_list li').click(function(){
    $(this).siblings().addClass('hidden');
    $(this).children().removeClass('hidden');
});

Of course, you can probably tell by the javascript that I don't have too much experience with things like this. I've tried searching for a bunch of different examples on Google and haven't been able to get anything to work as of yet. Any tips?

Thanks!

I'm attempting to create a "filterable" list of items. The user should be able to click on a list element (the parent), which would hide all other parent elements and show the "children".

An example of the html is:

<ul class='parent_list'>
    <li>Parent 1</li>
        <ul class='child_list'>
            <li>Child 1</li>
            <li>Child 2</li>
        </ul>
    </li>
    <li>Parent 2</li>
        <ul class='child_list hidden'>
            <li>Child 1</li>
            <li>Child 2</li>
        </ul>
    </li>
</ul>

My jQuery code is:

$('.parent_list li').click(function(){
    $(this).siblings().addClass('hidden');
    $(this).children().removeClass('hidden');
});

Of course, you can probably tell by the javascript that I don't have too much experience with things like this. I've tried searching for a bunch of different examples on Google and haven't been able to get anything to work as of yet. Any tips?

Thanks!

• javascript
• jquery

• 1 So when you click a "parent" all other parents dissapear. How do you intend to get them back again, by unclicking that one parent ? – adeneo Commented Dec 9, 2012 at 0:00

3 Answers 3

http://jsfiddle/czHQE/2/

This way you won't need a .child-list class.

HTML:

<ul class='parent_list'>
    <li>Parent 1
        <ul>
            <li>Child 1</li>
            <li>Child 2</li>
        </ul>
    </li>
    <li>Parent 2
        <ul>
            <li>Child 1</li>
            <li>Child 2</li>
        </ul>
    </li>
</ul>​

Javascript:

$('.parent_list li').click(function(){
    $(this).siblings().children().hide();
    $(this).children().show();
});​

Try this:

$('.parent_list > li').click(function(){
    $('ul.child_list').hide();
    $('ul.child_list', this).show();
});

And change your HTML to remove the extra </li> after "Parent1" and "Parent2":

<ul class='parent_list'>
    <li>
        Parent 1
        <ul class='child_list'>
            <li>Child 1</li>
            <li>Child 2</li>
        </ul>
    </li>
    <li>
        Parent 2
        <ul class='child_list'>
            <li>Child 1</li>
            <li>Child 2</li>
        </ul>
    </li>
</ul>​

When the direct children of .parent_list are clicked, it'll hide all children lists except for it's own. I used the .hide() and .show() methods since they simply toggle the element's display property.

Here's the jsfiddle to play around with.

You're going to want to clean up your markup also - you've closed the <li> tags for the "Parent 1" and "Parent 2" and then tried to close them again after the nested <ul>.

<ul class='parent_list'>
    <li>Parent 1
        <ul class='child_list'>
            <li>Child 1</li>
            <li>Child 2</li>
        </ul>
    </li>
    <li>Parent 2
        <ul class='child_list hidden'>
            <li>Child 1</li>
            <li>Child 2</li>
        </ul>
    </li>
</ul>