Two Buttons Method

What's covered?

The Script

Click in the field below and press Ctrl C

Display the True Code of the topic where you want Show / Hide to work.
Paste the code between the <head> and </head> tags.

The functions used by the method are all contained in the showhide.js javascript file that you can download by clicking showhide.zip.

Save the file to the root of your project so that it is in the same location as ehlpdhtm.js.

If the topic is at a different folder level to the showhide.js file, you will need to amend the last line above to show the relative path. Click here for details.

A bug in X5 may prevent the javascript file being added to the Baggage. Click here for details of the workaround. 10/05/04

The HTML

The Show All button invokes the function showEm() in the script.
The Hide All button invokes the function hideEm() in the script.
The red Print icon invokes the function printEm() in the script.
The blue Print icon invokes the function shown below.

The Buttons

The showhide.zip file also contains the buttons that I have used or you can use your own applying the file names that I have used. You can use your own names but you will need to amend the javascript to use your names.

It is vital that all references to the button in the HTML and the javascript file are in the same case as the image file. I suggest you use lowercase everywhere for this.

Adding the Buttons to Topics

Insert the graphics into your topic in the usual way.

Next add the lines highlighted blue. Your html will look something like the code below.

After inserting the image(s) required, add the lines highlighted blue. Your html will look something like the code below.

Show All

<p><img src="btnshowall.gif"

onClick="JavaScript:showEm()"

x-maintain-ratio=TRUE

style="border: none;

width: 73px;

height: 21px;

float: none;"

width=73

height=21

border=0></p>

Hide All

<p><img src="btnhideall.gif"

onClick="JavaScript:hideEm()"

x-maintain-ratio=TRUE

style="border: none;

width: 73px;

height: 21px;

float: none;"

width=73

height=21

border=0></p>

Print All - Red Print icon

<p><img src="PrinterRed.gif"

onClick="JavaScript:printEm()"

x-maintain-ratio=TRUE

style="border: none;

width: 16px;

height: 14px;

float: none;"

width=16

height=14

border=0></p>

Print As Displayed - Blue Print icon

This icon does not require any of the script above. It can be used alone in any topic.

It will error in Page Preview but works correctly in the published output or .chm file.

The code shown is for webhelp output. If you are using HTML help to create a .chm file, the fourth line of code should be amended to onClick="window.print()"

<p><img src="PrinterBlue.gif"

x-save-file=TRUE

x-save-method=compute-relative

onClick="window.parent.frames[1].focus();window.print()"

x-maintain-ratio=TRUE

style="border: none;

border-style: none;

width: 16px;

height: 14px;

float: none;

border-style: none;"

width=16

height=14

border=0> </p>

Always Print All Expanding and Dropdown Text

If you want to force the user to always print all expanding and dropdown text, open the showhide.js file in a text editor and follow the instructions at the end of the file.

This will result in the red Print Icon, Internet Explorer's Print and Print Preview menu options and the context menu Print option printing all the expanding and dropdown text, unless the user has clicked outside the topic frame.

Note that depending on how you amend the file, after printing all expanding and dropdown text will be displayed or hidden. You cannot use this method and return the user to the topic with the displayed text unchanged.

Finally, you cannot use the Print As Displayed method (the blue Print icon) described above if you make this amendment. If you do, it will be unreliable if any other print option has been used first in the same session.

Topic Revisions

Date	Changes to this page
20 Jan 2005	Instructions re amending relative path revised to recommend using a forward slash.
27 Aug 2004	Code to be added between <head> tags placed in a Form Element to make it easy to add it to the clipboard. Tip added to identify how to amend the path to the javascript file. Thanks to Rick Stone for suggesting these changes.
09 Mar 2004	Previously this method required a different javascript file for each folder level used by your topics. It also required that the images were held in the root of your project. The method has been revised so that all levels can access the same javascript file and the images can be wherever you want. The only requirement is that both the show and hide images are in the same folder.
10 May 2004	Note added re bug in X5 affecting baggage files.
20 Jun 2004	Warning added that the Print As Displayed - Blue Print icon method errors in Page Preview.
02 Jul 2004	Reworded re adding graphics to topics. No change in procedure.