Navigation: JavaScript and CSS in a Help Project >

Including the Toggle Script

Send comments on this topic.



This sample help project demonstrates how you can use custom JavaScript and CSS stylesheet files in an HTML Help (CHM) or Web Help system.


We have written a simple script based on jQuery framework that implements the possibility to create collapsible parts of content that the user can open by clicking on the plus icon and close by clicking on the minus icon.


Include the Toggle Script to the Help Project

1.On the Project tab, in the Project group, click Project Options.

2.In the Project Options dialog, in the left sidebar, click HTML Includes under HTML Export.

3.Click the Add button.

4.In the HTML Include dialog, in the Include box, select Folder.

HINT: We select the Folder type inclusion since the Toggle script is stored within a folder that contains JS, CSS, and image files.

5.In the Folder box, specify the path to the Toggle script's folder. Use the Browse button to locate the script on the hard disk.

HINT: For your own help project, you can find the Toggle script in the media repository folder of this help project (for example, C:\Users\UserName\Documents\HelpSmith Projects\Samples\Using JavaScript and CSS\Using JavaScript and CSS_files\__HTML_Includes\Toggle).

6.In the Include Child Files To box, specify that the script's files will be used for Topics in HTML Help (CHM) and for Topics in Web Help.

7.Click OK.


Adding the Toggle Script to the Help Project


Using jQuery Framework

Please note that while the Toggle script is based on the jQuery framework that significantly simplifies interaction with elements on an HTML page, you do not need to include the jQuery library to the help project since HelpSmith automatically links jQuery to the topics in HTML Help (CHM) and Web Help systems, and also to the HTML layout of the Web Help system.


HelpSmith Manual

For full information on using JavaScript and CSS stylesheet files, you can refer to the HelpSmith Manual. To access it, press F1 or visit this link.


Other Sample Help Projects

To access other sample help projects, on the File tab, click Help, and then click Sample Projects.


Related Links

Adding a Collapsible Box

Adding Show All/Hide All Link

Copyright © 2017