Using FrontPage to create hidden sections

This topic describes how to use FrontPage to create a block section within a topic which can be made hidden or visible by clicking on a customized link.

Note

You can always go into the HTML view and edit these items directly, however, this topic attempts to describe how to achieve the same results using the WYSIWYNG Normal view as much as is possible, and particularly to minimize the need to edit the HTML code directly.

Important

The following procedures must be followed exactly, or the results will be unpredictable.

How to use FrontPage to create hidden sections:

• HTML 'DIV' tags are used to identify a block section of the topic, so FrontPage must first be enabled to use DIV tags. Show how ...

To enable FrontPage to use DIV tags

1. From the Tools menu, select Page Options then the General tab.
2. Check Use DIV and SPAN tags when positioning (if not already checked).
3. Click OK.
• Type the paragraph(s) which will be hidden and revealed. Apply appropriate styles so that when made visible, they display as you would expect.

Note

One or more adjacent paragraphs as well as images and captions can all be grouped into one contiguous block. Show how ...

To group a section of the topic into a block

1. Select the section of the topic to be grouped together.

Tip

Select only whole paragraphs, by dragging the mouse pointer down the very left edge of the page in line with the section you want to select. Attempting to select paragraphs by dragging the mouse pointer over the text of the paragraph will not work as reliably, and may only select part of the paragraph.

2. From the Format menu, select Position and in the Positioning style section, select Relative.
3. Ignore the Location and size section for now, and click OK.

The selection will now display a single line border in Normal view.

• Identify the grouped section block for display control purposes. Show how ...

To identify a block

1. In Normal view, display the tags.

Tip

To toggle tag visibility when viewing from the Normal tab, press the keyboard shortcut CTRL + /.

2. Right-click on the DIV tag of the block, and select Properties.
3. In the Class: field, type the word "hidden" without the quotes.

This applies the default style which hides the block. 

4. In the ID: field, enter a unique name for the block. For example "Display1".

Notes

• Do not use spaces in the block name.
• When naming more than one block within the same topic, change the number at the end of the name appropriately. For example, "Display2", "Display3", etc.
5. Click the Format button.
6. Select Position and in the Positioning style section, select None.

This removes the positioning properties, yet leaves the identified DIV tags!

7. Click OK.
8. Click OK.

The job is now half done. You've created and identified the section to be displayed.

• Create the link which will perform the display of the section when clicked. Show how ...

To create the display link

1. In the paragraph before the hidden block, type in the words "Show more ..." or "Show how ..." without the quotes.

Notes

• No other text will work. The link must contain the words "Show more" or "Show how" (case insensitive), a space, then three full stops (not an ellipses) and with no trailing spaces.
• This sentence can be part of a larger paragraph, or can be in a paragraph on its own. It can be placed anywhere within the topic (except within the block section to be hidden and displayed), however, usability logic indicates that the best place for such a link would be immediately prior to the section it controlled.
2. Select only the text as described in the previous step.
3. From the Insert menu, select Hyperlink.

Tip

The keyboard shortcut for inserting a hyperlink is CTRL + K.

4. In the Bookmark: field, replace the default "(none)" with the text "ShowMoreOrLess" without the quotes.

Note

As no bookmark named "ShowMoreOrLess" exists within this topic, this link will display as a link, but will not jump anywhere! .

5. Click the Style button.
6. In the Class: field, type the word "ShowMoreOrLess" without the quotes.
7. In the ID: field, enter the text "ToggleDisplay('Display1')" where "Display1" is the unique name you used before to identify the block which is to be displayed.

Note

No other text will work. The ID must contain the word "ToggleDisplay" (case is sensitive) with no spaces, then the name of the block enclosed within single quotes and again within brackets. No other combination will work. The inclusion of any spaces will cause this to fail.

8. Click OK.
9. Click OK.

This creates the link with properties as close as is possible to our requirement, however, there is one last procedure to make it all work. Unfortunately, there doesn't appear to be a way to do this in Normal view.

10. Select the link then swap to HTML view.
11. In the <A> tag, select the word ID and replace it with the word onclick.
12. Swap back to Normal view and Save the file.
• Test the operation of the link by swapping to Preview view and clicking on the link.

Note

FrontPage has a bug where the first time you click this link in Preview view, the page is refreshed and the link action is lost. All subsequent clicking of the link whilst remaining in this view behaves properly. It always behaves properly in IE, and in the compiled HTML help.

Here is a working example:

Example

Now you can display and hide text at the click of a button. Show more ...

This section is only displayed when the "Show more ..." link above was clicked.
To hide this section, click on the "Show less ..." link above.

This is the following paragraph which gets moved down when the hidden section is displayed.

See Also

FrontPage Tips and Tricks |  Lotech Solutions' Tips, Tricks, and Procedures

 email webmaster

Copyright Lotech Solutions. All rights reserved.