Collapsible outlines are a client-side JavaScript effect that lets you shrink bulleted or numbered lists to just the low level at the initial viewing of the page. Clicking the low level with your mouse will result in the subitems being shown. This is a great effect for organizing a considerable amount of information on the same page as can be seen in Figures 21.1 and 21.2. Figure 21.1. The Web page shows only the low level bullets. Compare with Figure 21.2 and 21.3.Figure 21.2. Compare with Figure 21.1. The first item in the list was clicked with the mouse, and the information below it is now shown.
For more information on scripting in Web design, see "Client-side Scripting," p. 475. NOTE All collapsible outline content for the page is loaded to the client when the page is first viewed. Browsers that can't support JavaScript will usually show the entire outline. TIP There is no indication that the outline content can be expanded, such as a hyperlink. Make sure that you let the user know the option is available or he won't know it is there.
Bulleted ListsTo use this effect on a bulleted list, simply create a multi-leveled bulleted list such as the one shown in Figure 21.3. Figure 21.3. This bulleted list was created with the collapsible outline shown in Figures 21.1 and 21.2.Once the list is created, select the list content and choose List Properties from the context menu. Select any tab from the List Properties dialog box, shown in Figure 21.4. Check the Enable Collapsible Outline box and, if desired, the Initially Collapsed option. Figure 21.4. Any tab in the List Properties dialog box lets you toggle the Collapsible Outline option on and off. The Other tab is shown in this option.FrontPage then writes the appropriate JavaScript code to your page, requiring no additional action on your side. If you edit list content, FrontPage will update the script accordingly. TIP Take a look at the script behind a collapsible outline it's pretty impressive and can teach you a lot about good script design. Numbered ListsNumbered lists work, and are created, the same way as a bulleted list. Collapsible outlines only work on these two kinds of lists and can't be utilized on a Definition, Directory, Menu, or Normal List.
For more information on FrontPage's list features, see "Developing the Basic Page: Page Properties, Text, Lists, and Hyperlinks," p. 77.
|