Question

I have html like

<ul>
<li class="dropdown">text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li class="dropdown">text</li>
<li>text</li>
<li>text</li>
<li class="dropdown">text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>

CSS:

li {display:none;}
li.dropdown {display:block;}

When we click on li.dropdown, all the <li> without classes, from the current to the next li.dropdown, should become visible. And opposite action when we click it again – hide <li> without class dropdown.

How do I do this?

Answer 1

The correct way to do this would be with submenus, so:

<ul>
    <li class="dropdown">text
        <ul>
            <li>text</li>
            <li>text</li>
            <li>text</li>
            <li>text</li>
        </ul>
    </li>
    etc...
</ul>

You can then do

$('li.dropdown').click(function() {
    $(this).find('ul').slideToggle('slow');
});

Otherwise, you’ll have to use nextUntil:

$('li.dropdown').click(function() {
    $(this).nextUntil('li.dropdown').slideToggle('slow');
});

This will have the disadvantage of hiding each of the nested li elements individually, rather than as a block. Do the first if you can.