javascript - Getting a range of objects after an object and hide/show them accordingly -

i have list group has seperated groups, meaning there rows in list group seperate/group them assigning title rows in list class. i'm trying hide list inside inside group, don't want hide list objects code does. know how hide groups individually when click title of group hides list inside group (without modifying tags in html code). when referring code example below, if clicks on 'title 2', <li> after , before 'title 3' disappear/reappear. please see code below:

html:

<ul> <li class="title">title 1</li> <li></li> <li></li> <li></li> <li></li> <li class="title">title 2</li> <li></li> <li></li> <li></li> <li class="title">title 3</li> <li></li> <li></li> <li></li> </ul> 

jquery / js:

$("ul li.title").click(function(){   $("ul li").not(".title").toggle();     }); 

you can find fiddle here: http://jsfiddle.net/qnnge/

i think you're after this:-

$(this).nextuntil('li.title').toggle();

so when clicking title, toggle visibility of elements after clicked title, until next one.

here's fiddle