Twisties and Show All

What's covered?

The scripts for the One Button Method of showing all dropdown text and for Twisties work in both webhelp and compiled .chm help. However they cannot both be used in the same topic.

This topic offers an alternative script for webhelp and CHM help. It will only work in topics with BOTH the Show All button AND Twisties. If you only want one or the other, then please see the separate original instructions.

Credits

My thanks to Jesse Brossard and for sharing the script with us. His colleague Lewis Gault took the original script for Twisties and rewrote it to avoid the conflict with the Show / Hide All script.

Demo

Click here to see the method working in WebHelp.

Method - Part One - Setting Up the Twisty

While you are trying this method for the first time, please stick to the default image names and folders until you have got things working. The defaults are btnshowall.gif, btnhideall.gif, arrowright.gif and arrowdown.gif. Under Images in project manager, create a new folder called images and save all four images there although only two will ever show in the images folder.

Referencing the Script

Click in the field below and press Ctrl C to put the code in the clipboard.
Display the True Code of the topic where you want the twisty to work.
Paste the code between the <head> and </head> tags.

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

The script used by the method is contained in the showhide_twisty2.js javascript file that you can download by clicking showhide_twisty2.zip.

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

When you save the topic, showhide_twisty2.js should appear in the baggage file list. If it does not I suspect you are using X5? If yes, click here

Adding the Graphic

Insert the graphic that the user will see on opening the topic (arrowright.gif in this example).

Create the Dropdown

Add the text you want next to the image and select both the text and the image.

Click DHTML | Create Dropdown Hotspot and Text and add the required text.

Close the dropdown text editing window.

Edit the Code

Click the graphic, switch to TrueCode view and add the lines highlighted blue. Your html will look something like the code below. The name for each hotspot in a topic must be unique within that topic, the next one could be dropdown2. Avoid spaces in the name.

Also save the arrowdown.gif file to the same folder as the arrowright.gif file. This is done using Windows Explorer and at this stage the file will not be part of your project.

<p><a class=dropspot

x-use-popup=#POPUP246461267

x-popup-type=pulldown

href="javascript:kadovTextPopup(this)"

id=a2

onClick="JavaScript:swapImage(dropdown1);showhidecheck()"

onFocus="this.blur()">

<img src="../../arrowright.gif"

name=dropdown1

x-maintain-ratio=TRUE

style="border: none

Baggage Files

You will need to add arrowdown.gif to baggage.

Right click Baggage Files in RH Project Explorer, select New Baggage File and navigate to the arrowdown.gif image.

Form Fields

If your topic has any form fields in it, the twisty cannot work within a form. When you add any type of form field, RH adds a <form> tag just after the opening body tag.

You need to delete that tag and precede each form field with <form>. Place a closing </form> tag after the form code.

If you have lots of form fields and lots of twisties, there's a trick.

Contrary to the instructions above, do not delete the <form> tag that RH adds.
See the code above under Edit the Code, prefix it </form> and add <form> after the end of the code for link (just before whatever follows the twisty image and text). That means that each twisty is outside the form area and will work.

Method - Part Two - Setting Up Show / Hide

Set up the Show All button as described in One Button Method except in the step "Adding the Buttons to Topics" you add the line below instead.
onClick="JavaScript:jobCheck(this);swapImages(this);showorhide(this)"

Options

Once you have got the method working following the steps described, you may want to make some changes.

Open showhide_twisty_web.js in a text editor and you will see the following lines which Lewis has usefully added.

Variable	Description
var state = "hidden"; // default state	Do not change this variable.
var path = "../images/"; // path to image directory	This allows you to change the folder for the images.
var btnshowall = "btnshowall.gif";	This allows you to change the name for the show all button.
var btnhideall = "btnhideall.gif";	This allows you to change the name for the hide all button.
var img_expanded = "arrowdown.gif";	This allows you to change the name for the down pointing button.
var img_collapsed = "arrowright.gif";	This allows you to change the name for the right pointing button.

Download

Click here to download a demo project with the required javascript.

Topic Revisions

Date	Changes to this page
22 Aug 2006	Instruction added to create a folder under Images.
22 Aug 2006	In "Method - Part Two - Setting Up Show / Hide", the line onClick="JavaScript:swapImage(dropdown1);showorhidethis()" amended to onClick="JavaScript:jobCheck(this);swapImages(this);showorhide(this)"
19 Apr 2006	Topic rewritten to reflect that the new script works for both WebHelp and CHM help.
14 Apr 2006	WebHelp Method added.
28 May 2005	New topic