Question

I have this code that I can’t modify, and I want to add a selector that selects (on click) all the elements under it, till the next appearance of the main element. The problem is they are not nested, just one under other.

<div class="project name">..</div>
<div data-project-id="1987" class="sidebar_project">...</div>
<div data-project-id="3087" class="sidebar_project">...</div>
<div data-project-id="8903" class="sidebar_project">...</div>
<div data-project-id="223570" class="sidebar_project">...</div> 
<div class="project name">..</div>
<div data-project-id="1846" class="sidebar_project">...</div>
<div data-project-id="0935" class="sidebar_project">...</div>
<div data-project-id="84735" class="sidebar_project">...</div> 
<div class="project name">..</div>
<div data-project-id="11135" class="sidebar_project">...</div> 

I can easy select all sidebar_projects and hide them, but what I want its be able to make a button that on click hides/shows all sidebar_projects from It’s project name div to the next project name div.

THx

Answer 1

Try this:

$('.project.name').on('click', function(e){
    $(this).nextUntil('.project.name', '.sidebar_project').toggle();
});

I didn’t test this, but I think that this will be work fine for you.

More about nextUntil() see here