Twisties

What's covered?

Several people have asked if it is possible to have an image that changes when a single hotspot is clicked and typically they refer to an arrow that points right until it is clicked and then it points down. This idea comes from Lotus Notes where it is known as a Twisty.

The original script is described in this topic and it works for both webhelp and compiled chm help produced using RoboHelp. The script works in versions from RoboHelp 9.2 to X5 and in Adobe RoboHelp6 and 7.

For a method that works using other editors, see Dropdowns.

This script cannot be used satisfactorily in the same topic as the various Show / Hide methods described in Expanding and Dropdown Text. Thanks to Jesse Brossard and colleague Lewis Gault an alternative script is available. Click here.

Demonstration

Click here to open a demonstration in a RoboHelp output.

Method

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 twisty.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 twisty.js javascript file that you can download by clicking twisty.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, twisty.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:swapImages(dropdown1)"

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.

Topic Revisions

Date	Changes to this page
12 Jan 2008	Version compatibility updated to cover Adobe RoboHelp 7.
26 Feb 2006	What's Covered? amended to cover dropdowns using other editors.
26 May 2005	Availability of script running both Show / Hide and Twisties in a CHM file added.
13 Apr 2005	Incompatibility with Show / Hide methods noted.
20 Jan 2005	Instructions re amending relative path revised to recommend using a forward slash.
27 Aug 2004	Method revised so that the image changes when you click any part of the hotspot. Previously it only changed if you clicked the arrow. Change to the code identified by Rick Stone to whom many thanks. It now works like a true Twisty. 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 as well.
02 Jul 2004	New topic