You can create special links with which you can allow the user to expand and collapse all the toggles in the current topic with a single click. There are a number of very useful things you can do with this feature. For example, it allows you to write help for both novice and experienced users on the same page. You could then create links in the topic header for switching between the two versions. You can also use it to create a button that will pre-expand all the toggles in the current topic before it is printed.
1.Click in the place where you want to insert the links, for example in the header of your topic.
2.Select the Link tool in and select the Script Link tab at the left of the dialog and HTML JavaScript as the script/macro type.
3.Enter the following code in the Script: editing box:
Version for separate links for Expand and Collapse:
Expand All:
|
Collapse All:
|
javascript:HMToggleExpandAll(true)
|
javascript:HMToggleExpandAll(false)
|
Version for a single link that alternates between expand and collapse:
Expand/Collapse:
|
javascript:HMToggleExpandAll(!HMTogglesAllExpanded)
|
|
To add links to all your pages you need to insert the necessary code manually in the HTML template for your pages. You will need some experience in editing HTML for this. See The topic page templates in the Using HTML Templates chapter for detailed instructions on how to add code to your topic page templates.
•Locate the position in the template where you want to insert your links and then insert the following code (you can change the title text to insert your own tooltips, of course):
Expand All:
|
<a href="javascript:HMToggleExpandAll(true)" title="Tooltip text">Expand All</a>
|
Collapse All:
|
<a href="javascript:HMToggleExpandAll(false)" title="Tooltip text">Collapse All</a>
|
Expand/Collapse:
|
<a href="javascript:HMToggleExpandAll(!HMTogglesAllExpanded)" title="Tooltip text">Expand/Collapse</a>
|
Locating the correct position in the template:
The <%TOPIC_TEXT%> variable in the HTML template inserts the content of your topic from the editor into the template. This means that everything inserted directly above this variable is inserted directly before the beginning of your normal topic content, everything directly below it is inserted directly after the end of your topic content.
The topic header is in the code between the <IF_TOPIC_HEADER> and </IF_TOPIC_HEADER> tags. The header components are in a table. You may need to add cells or rows to achieve the effect and positioning you want.
|
There is a special conditional tag called <IF_TOGGLES> that you can use in your HTML templates. This condition only evaluates true if the current topic contains one or more toggles. This means that you can use them to create Expand All / Collapse All links that will only be displayed in topics containing toggles.
You use this condition just like any other condition in HTML templates. Just enclose the link code (and any other additional code you are using for the links) in a pair of <IF_TOGGLES> condition tags, like this:
<IF_TOGGLES><a href="javascript:HMToggleExpandAll(!HMTogglesAllExpanded)" title="Expand/collapse hidden text">Expand/Collapse</a></IF_TOGGLES>
|
You can use the Expand All function to create a Print link for HTML Help and WebHelp that will pre-expand all the toggles in the current topic before printing it. For instructions Printing topics containing toggles.
|
See also:
Using HTML Templates
The topic page templates
About HTML Templates
