jQuery in Action
134
CHAPTER 5
Sprucing up with animations and effects
The full code for this page can be found in file chapter5/collapsible.list
.take.1.html. (If you surmise that the take 1 part of this name indicates that we'll
be revisiting this example, you're right!)
.take.1.html. (If you surmise that the take 1 part of this name indicates that we'll
be revisiting this example, you're right!)
That wasn't too difficult for the amount of functionality enabled, but as it turns
out, it can be even easier.
5.1.2 Toggling the display state of elements
Toggling the display state of elements between revealed or hidden--as for the
collapsible list example--is such a common occurrence that jQuery defines a
command named
collapsible list example--is such a common occurrence that jQuery defines a
command named
toggle()
that makes it even easier.
Let's apply this command to the collapsible list and see how it helps to simplify
the previous code. Listing 5.2 shows only the ready handler for the refactored page
(no other changes are necessary) with the new changes highlighted in bold. The
complete page code can be found in file chapter5/collapsible.list.take.2.html.
(no other changes are necessary) with the new changes highlighted in bold. The
complete page code can be found in file chapter5/collapsible.list.take.2.html.
$(function(){
$('li:has(ul)')
.click(function(event){
if (this == event.target) {
$(this).children().toggle();
$(this).css('list-style-image',
($(this).children().is(':hidden')) ?
'url(plus.gif)' : 'url(minus.gif)');
}
return false;
})
.css('cursor','pointer')
.click();
$('li:not(:has(ul))').css({
cursor: 'default',
'list-style-image':'none'
});
});
Listing 5.2 Changes to the collapsible list to use the toggle() command