To create a collapsible list (a list with words or phrases at different levels), open a document in Page View and place the cursor where you want the list to appear. Select Bullets and Numbering from the Format menu and use one of the three tabs to decide how you want your list to appear- that is, as regular bullets, pictured bullets, or one of several lettered or numbered choices. At the bottom of the dialog you'll see two check boxes: Enable Collapsible Outlines and Initially Collapsed. Check both of them, then click OK.

Now type the top-level item and press Enter. Type the first subordinate item, then double-click the Increase Indent button on the toolbar. This will indent the item and give it a different bullet type. Press Enter again, then repeat for all the items on the same level. If you want further sublevels, type each item and double-click the Increase Indent button, repeating this procedure for all sublevels. If you need to return to a higher level, type the item and double-click the Decrease Indent button or press Enter three times. Complete the list by pressing Enter until the cursor appears out of the list at the left margin.

Now click the Preview button at the bottom of the main FrontPage window. You should see the top-most item on the hierarchy, and when you click on that item, the list should expand. If it does not, return to the List Properties dialog to ensure that the Enable Collapsible Outlines and Initially Collapsed boxes are checked.

Once the collapsible list is in place, there are two more steps you can take for the sake of usability. The problem with collapsible lists is that users have no indication that they are in fact collapsible. The cursor doesn't change when they move the cursor over the list items, so there's no visual cue. You can give them one by using the cursor:hand value of the Cascading Style Sheets specification (CSS2). Open HTML view by clicking the HTML button at the bottom of FrontPage's work pane, then locate the opening tag for the list, either <ul dynamicoutline> or <ol dynamicoutline>. Now find the <LI> tag for the first list item and change it to read <LI STYLE="cursor:hand">. When you now preview the page, you'll see that passing the pointer over any list item changes the cursor from the standard I-beam to a pointing finger. But this doesn't quite complete the usability picture, because now all the items display the pointing finger, including those that cannot be further expanded. To correct this, go back into HTML view, locate the <LI> tag for each unexpandable list item, and change that tag to read <LI STYLE="cursor:text">. This will return the standard I-beam to those items.

One final nod to usability is to change the bullet type that precedes the items at each of the same levels in the list. You can do this by right-clicking on the first item of each level and selecting List Properties, then applying one of the bullet types from the Plain Bullets tab. If you have custom bullets, you can apply them from the Picture Bullets tab.