JQuery_ Novice to Ninja - Earle Castledine [64]
The opposite of the filter method is called add. Where filter removes elements from the selection, add appends new elements to the selection. By combining filter and add, you can do an awful lot of processing in a single jQuery chain—adding and removing elements as necessary along the way.
Note: Advanced Use of filter
Sometimes you’ll need to perform filters involving more sophisticated criteria; in these cases you can use a custom function to define your rules. The function is processed for each element in the jQuery selection. If it returns true, the element stays in the selection; otherwise, it’s scrapped. As an example, let’s keep every paragraph element that’s either the third in the selection or has the class active:
$('p').filter(function(index) {
return index == 2 || $(this).hasClass('active');
});
Notice that we have access to the zero-based index of each element in the selection, and that the scope is that of the current element? That’s why we can refer to it with $(this). You can include any amount of processing in your criteria function—just be sure to return true if you want to hold on to the element.
The code for the accordion effect needs to close any items that are open (as there should only ever be one open at a time), then open the item we clicked on. But there’s a problem with this logic: if we click on an item that’s already open, it will unnecessarily slide up and down. So first we need to check that the item we clicked on is already open:
chapter_05/07_simple_accordion/script.js (excerpt)
$('#celebs ul > li').click(function() {
var selfClick = $(this).find('ul:first').is(':visible');(1)
if (!selfClick) {(2)
$(this)
.parent()
.find('> li ul:visible')
.slideToggle();
}
$(this)
.find('ul:first')
.slideToggle();(3)
});
Let’s break this code down:
(1)
We check to make sure if the nested ul is visible using the .is('visible') construct, and store that result in a variable named selfClick (which will be true if the user has clicked on a section that’s already open).
(2)
We use the JavaScript ! operator in an if statement to hide the visible section if it’s not the one that was clicked on. ! means ‘not,’ so the nested block of code will only be run if selfClick is not true.
(3)
Finally, we toggle the state of the item we clicked on: it slides up if it’s open, and down if it’s closed.
The way we’ve coded our solution, it’s possible for users to close the open section of the accordion, thus collapsing it entirely. If you’d rather enforce the rule that one item must always remain visible, you could adjust the code so that clicking on the open item will have no effect. This is quite simply done with a little basic JavaScript; if selfClick evaluates to true, we simply exit the function using the JavaScript return keyword:
chapter_05/08_simple_accordion_variant/script.js (excerpt)
$('#celebs ul > li').click(function() {
var selfClick = $(this).find('ul:first').is(':visible');
if (selfClick) {
return;
}
$(this)
.parent()
.find('> li ul:visible')
.slideToggle();
$(this)
.find('ul:first')
.stop(true, true)
.slideToggle();
});
Multiple-level Accordions
Earlier, we saw that you should set up your accordion HTML structure consistently —and here’s why! If we’ve been specific enough with our jQuery selectors, adding another level to the accordion is as simple as including the next level in our event handlers. First of all, we add in the second level of menu items. We use exactly the same structure as the first level, but nest it inside the first level list item:
chapter_05/09_multi_level_accordion/index.html (excerpt)
- "A" List Celebrities
- Computadors New!
- Rising Stars
- Falling Stars