dietcoupon (1) [Avatar] Offline
#1
In the first two collapsible list examples in Chapter 5, the code checks to see whether the children of li's are hidden or not, and reacts accordingly. I can figure that much of it out, but what I don't see is why the ul children of li's are hidden as soon as the page loads. I see that in the text for example three, .hide() is called explicitly since it's "no longer repeating code," but I guess I don't see how and why it would have been redundant in the prior two examples...

Thanks in advance!

Edit - I would also love to know why the prior examples have "($(this).children.is(':hidden')) ?" and the third one uses "(!$(this).children.is(':hidden')) ?" I understand what the ! generally does, but I don't see what difference it's making between here.

Message was edited by:
dietcoupon
mraj (104) [Avatar] Offline
#2
Re: Why does the collapsible list default to hidden?
Hi dietcoupon,

The ul children of li's are hidden when the page loads so that the main list is initially displayed all collapsed. This occurs when click() is called, e.g., "6" on p. 132.
For the 3rd example, we don't want to use click() because it is animated -- we don't want the page to animate when it first loads, slowly collapsing the lists. So for the 3rd example, we use hide() instead.

The "!" in example 3 is explained at the top of p. 138 -- the call to toggle() now comes after the 'list-style-image' check, so the logic for changing the image needs to be reversed/inverted. E.g., for example 3, if the ul is not currently hidden (i.e., expanded), we will be toggling it to be hidden (i.e., collapsed), hence we need switch to the plus.gif.