Twisties and Show All / Hide All Buttons

What's covered?

RoboHelp has long provided a way to create dropdown and expanding hotspots using Dynamic HTML and/or the Glossary Hotspot Wizard. All the Javascript code is written for the author. So far, so good. Many authors though prefer to have an image (typically arrows) that offer a visual invitation to the reader to open or close the information. These graphic cues are known as Twisties as the idea came from Lotus Notes and that is what they were named there.

Before the release of Adobe RoboHelp 8, custom javascripts were the only solution. RoboHelp 8 introduced built in Twisties which are fine as long as you want all of your dropdowns to have twisties. What is provided here are custom methods that work with RoboHelp 8 and earlier versions and give you control over which dropdowns have twisties and which do not.

In addition there are options that enable a user to click a button to expand all the dropdowns and expanding hotspots in a topic, with or without twisties.

Introduction

Various javascript methods have been provided on this site to allow authors to set up twisties and show/hide buttons. Previously both functions required separate javascript files and show/hide itself needed separate files depending on whether the author wanted to have one buttons where the label toggled between Show and Hide or two separate buttons.

New Script - Twisties 2

Thanks to Willam Van Weelden, there is now one script that can be easily configured to provide whatever options are required.

This is the recommended method unless you have already used the previous methods and wish to continue with them.
Older Scripts - Twisties 1

If you have tried the older scripts in the last year or so, you may have found they did not all work in Firefox. Willam Van Weelden has kindly reviewed those scripts and got them working again. Previously the methods were described in a number of topics. I have now incorporated them into a RoboHelp project so that you can see the methods working within RoboHelp and see exactly how things need to be set up.

Toolbar Show / Hide Button

The scripts above work with Show/Hide buttons on the required pages. This method allows you to place a button on the toolbar that works on all pages.

This will work with the Twisty method that ships with RoboHelp 8 and with T S Paul's method described in Twisties 1.
Dropdowns Using Other Editors

Although not strictly relevant to this topic, occasionally authors have required dropdown methods that work using other editors. See Dropdowns for information on that.

Demonstrations and Downloads

See the demonstrations first and then download RoboHelp 8 projects that will allow you to examine how things have been set up.

Whilst the projects are produced using RoboHelp 8, the methods do work in earlier versions. I will be adding PDFs of the instructions for users of earlier versions.

 

Demonstration

RoboHelp 8 Project

PDF Instructions

Twisties 2

This demo shows what can be set up using the single twisty2a.js file. This is the recommended method if you have not previously set up Twisties or Show/Hide buttons.

Note that twisty2a.js is an updated file to address an incompatiblity found in twisty2.js with RoboHelp 7.

 Click here Click here Click here

Twisties 1

This demo is retained for the benefit of authors who have already used these scripts and want to continue with them.

 Click here Click here Click here

Toolbar Show/Hide

One toolbar button that show/hides dropdown and expanding text in all topics. If you don't want twisties, this is the easiest solution.

 Click here Click here Click here

Donations

If you find the information and tutorials on my site save you time figuring it out for yourself and help improve what you produce, please consider making a small donation.

Topic Revisions

Date

Changes to this page
27 Mar 2010 Willam Van Weelden's new single script method added.
03 Mar 2010 Show / Hide Toolbar method added.
31 Jan 2010 Complete review of Twisties and Show / Hide. Scripts amended by Willam Van Weelden plus Willam's improved twisty script. Instructions now all in download.
29 Jan 2009 Instructions removed from this page. They are now in a downloadable RoboHelp project.
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