WebHelp Toolbar Buttons that Show and Hide the Navigation Pane

In WebHelp, the buttons for the TOC, index, search and glossary will only make the navigation pane visible: When the TOC is already opened, clicking the TOC button again will not hide the TOC. With the attached script you can create buttons that will show and hide the navigation pane based on the opened pane. For example: You click the TOC button to open the TOC. Click the TOC button again and the navigation pane will be hidden.

A special thanks goes to Abbey Schulz who helped setting the requirements and helped testing.

Download the JavaScript file

Follow these steps to set up your buttons:

1. Add the JavaScript file as a baggage file to your project.
2. Open the skin editor.
3. Create a new button, call it ShowHide TOC. You can set any text or image as you see fit.
4. On the action tab of the new button, add the following code in the OnClick field: setpane('toc');
5. Now choose External JavaScript fileand choose the JavaScript file you just added as a baggage file.
6. Now style the button any way you want.
7. Now you have to create buttons for the index, search and glossary. You do this by creating buttons and setting the correct OnClick event. Do NOT reference the external JavaScript file, as that is already referenced for the TOC.When you create an output without a TOC button at all, reference the JavaScript file for another button.
   • Index: setpane('idx');
   • Search: setpane('fts');
   • Glossary: setpane('glo');
8. Save the skin.
9. Go to the SSL properties and select your four (or less) custom buttons AND the default buttons. If you want to have a TOC, select both the custom TOC button and the default TOC button.
10. Save you SSL settings.
11. Generate the layout.
12. Go to your output and open whskin_tbars.htm in Notepad or another text editor.
13. Search for addButton( in the bottom of the file. The default buttons are the function calls with the first variables set to toc, idx, fts and glo.
14. Comment out the default buttons that you want replace by your custom buttons. You comment those buttons out by adding //in front of the function call.
15. Save your changes.

The code in the file will look something like:

//addButton("toc",BTN_TEXT|BTN_IMG,"Contents","","","","",0,0,"17_help.png","17_help.png","","17_help.png","","");
addButton("searchform",BTN_TEXT,"","","","","",0,0,"","","","","","");
addButton("custom19953",BTN_TEXT|BTN_IMG,"Contents","","setpane('toc');","","",0,0,"16_help.gif","16_help.gif","","16_help.gif","","");