Twisties and Show Hide all

Submitted by Willam van Weelden on

Download file: 

twisty.js.txt

RoboHelp provides dropdows for efficiently hiding content. RoboHelp 8/9 also supports twisties, but only two images and all or nothing. RoboHelp still lacks an option to show or hide all dropdowns and expandspots on a page.

The following scripts adds support for twisties and/or show hide buttons. The script can be configured for the following options:

  • Twisties only.
  • Two button method Show Hide only.
  • One button method Show Hide only.
  • Two button method Show Hide with twisties.
  • One button method Show Hide with twisties.

Compatibility

This script works with the following outputs:
Version / Output AIR CHM FlashHelp WebHelp
RoboHelp 9 No Yes Yes Yes
RoboHelp 8 No Yes Yes Yes
RoboHelp 7 No Yes Yes Yes

Note: If you want to use linking to dropdowns with this twisty method, you need the Twisties and link to dropdown script.

Setting up the script

  1. Add the script as a baggage file to your project.
  2. Add the script in the header section of your topic:
<head>
  <script type="text/javascrip" src="http://wvanweelden.eu/twisty.js"></script>
</head>
  1. Then set up the method you want. See below.

Twisties

  1. Add the images you want to use for twisties to your baggage files.
  2. Set the filenames of the twisty images you want to use in the variables TwistyHidden and TwistyShow.
  3. Add the TwistyShow image as a child element of a link with a dropdown or an expandspot.
    • Correct: <a href="http://wvanweelden.eu/"><img /></a>
    • Incorrect: <img /><a href="http://wvanweelden.eu/"></a>
  4. Set the onclick attribute for the link as follows: <a href="http://wvanweelden.eu/" onclick="swapImages(this, 'dropdown1')">
  5. Set the name from the link in the image:  <img src="http://wvanweelden.eu/myimage" name="dropdown1" />
  6. Repeat steps 2 to 5 for every twisty you want to add. Note: The name you use for the image has be unique for the page.

ShowHide one button method

  1. Set the variable OneButtonMethod to false.
  2. Add a ShowAll button (image) to your topic.
  3. Add the onclick attribute ShowAll(this): <img src="http://wvanweelden.eu/showall.png" onclick="ShowAll(this)" />
  4. Add a HideAll button (image) to your topic.
  5. Add the onclick attribute HideAll(this): <img src="http://wvanweelden.eu/hideall.png" onclick="HideAll(this)" />

ShowHide two button method

  1. Set the variable OneButtonMethod to true.
  2. Set the filenames of the button images you want to use in the variables ShowAllButton and HideAllButton.
  3. Add a ShowAll button (image) to your topic.
  4. Add the onclick attribute ShowAll(this): <img src="http://wvanweelden.eu/showall.png" onclick="ShowAll(this)" />

ShowHide with twisties

Add twisties and the buttons as described above. No extra settings needed.

Tags: