Hello Experts!
I have a staff list that uses a text input livesearch with filter on/
off feature. I am new to JQuery, don't really understand the syntax
for advanced selecting, so I'm writing the same function 12 times for
12 lists.
I need to simplify things with a generic function that toggles checked
boxes on/off for the currently visible list only. No separate classes
for every dl.
The jquery I tried (to NO avail) looks like so:
var filtog = false;
$('a.filtertoggle').click(function() {
$(this).closest('div').nextAll('dl.listcontent input:not
(:checked)').closest('dl').hide();
filtog = !filtog;
});
and the HTML for the list looks like so:
<div id="mainoffice" class="tabbed">
<div class="searchbar"><b>Filter</b>Search</div>
<div class="searchpanel">
<b><a href="javascript:;" class="filtertoggle"><img src="images/
GIFs/filteroff.gif" alt="" /></a></b>
<input type="input" name="mainsearch" id="mainsearch" />
<a href="javascript:;" class="searchclear mee"><img src="images/
GIFs/searchclear.gif" alt="" /></a>
</div>
<dl class="listheader">
<dt><b>899-6800</b>Phone</dt>
<dt><b>899-6839</b>Fax</dt>
</dl>
<dl class="listcontent">
<dt><b>4100</b><a href="">Laura Church</a></dt>
<dd><b><input type="checkbox" /></b>Administrative Secretary</dd>
</dl>
<dl class="listcontent">
<dt><b>4200</b><a href="">Nancy Andre</a></dt>
<dd><b><input type="checkbox" /></b>Curriculum Secretary</dd>
</dl>
<dl class="listcontent">
<dt><b>4206</b><a href="">Mary Falco</a></dt>
<dd><b><input type="checkbox" /></b>Activities Secretary</dd>
</dl>
</div>
I do believe the issue is ('div').nextAll('dl.listcontent input:not
(:checked)'. It won't find any inputs next to the search div. I need
it to find any dl.listcontents next to the search div and then look in
there.
How is this done? And then, how do you toggle the Filter state in the
same function? My solution above does nothing.
I sure appreciate any help.
Arlen
