Therefore, the
selector in the CSS rule has been updated accordingly:
.expandable {
display: none;
}
USING LINKS AND CREATING NAVIGATION
193
5
This system enables you to use as many collapsible divs as you like on the page, and you
don??™t have to set id values??”the toggling is essentially automated. However, as mentioned
earlier, you must ensure that your structure remains the same for each area that can be
toggled, otherwise the script won??™t find the correct element to make visible or invisible
when the links are clicked.
How to find targets for collapsible content scripts
If you want to change your document structure when using the script from the previous
section in this chapter, you need to find the parent/sibling path, in Internet Explorer and in
other browsers. If you??™ve a good grasp of JavaScript, this should be simple; however, if you
don??™t??”or you just want to sanity-check your values??”it??™s simple to find out what an element??™s
parent is, what it??™s next sibling is, and various combinations thereof.
First, give your clickable element a unique id value:
?? onclick="toggle(this); return false;">Toggle div 1!
Elsewhere within the web page, add the following script:
Before .nodeName, add whatever combination of .
Pages:
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288