CODEWITHSUNDEEP
javascriptjqueryhtml
Vecta
Vecta

Reputation: 2350

jQuery: Affecting List Elements of the Same Depth

I'm working on creating a nested list that essentially walks users through a set of responses to arrive at an appropriate piece of information.

Something like this:

<ul id="questions">
    <li>I will be traveling in the summer.
        <ul class="sub hidden">
            <li>I will take a plane</li>
            <li>I will drive</li>
            <li>I will take a train</li>
        </ul>
    </li>
    <li>I will be traveling in the summer.
        <ul class="sub hidden">
            <li>I will take a plane.</li>
            <li>I will drive</li>
            <li>I will take a train</li>
        </ul>
    </li>
</ul>

Ideally, a user might arrive on this page, select "I will be travelling in summer". The second option would fade to grey and the nested sub options would appear. Then, if a user selected "I will drive", they may be presented with more sub-options, and the other two options would fade away.

I'm able to get the first tier of options to behave in the way I need them to. However, when a user clicks on an li element, I'm not sure how to get all non-selected li elements at the same depth and make them fade out.

$(document).ready(function() {     
     $("#questions li").click(function() {
         $(this).addClass('selected').removeClass('fade');
         $(this).children().removeClass('hidden');
         $("ul#questions li").not('.selected').addClass('fade');
     });                            
});

Thank you for your help.

Upvotes: 2

Views: 122

Answers (2)

FiLeVeR10
FiLeVeR10

Reputation: 2165

You would want to change $("#questions li").click

to directly select li children like this $("#questions>li").click

and for $("ul#questions li").not('.selected')

you would want something more like .parent().children('li:not(.selected)')

so that the current li, and it's siblings are affected.

something similar to this

$("#questions>li").click(function() {
    $(this).toggleClass('selected')//toggle selected
    .children().show().end()//show sub
    .parent().children('li:not(.selected)')//select !selected
    .children(':visible').hide();//hide !selected sub
});

made a fiddle: http://jsfiddle.net/filever10/9hNXG/

Upvotes: 0

voithos
voithos

Reputation: 70552

You'll want to use the direct child syntax:

$('#questions > li').not('.selected').addClass('fade');

or, more succinctly,

$('#questions > li:not(.selected)').addClass('fade');

Upvotes: 1

Related Questions