Home > How To > Create a Custom Toggle Panel

Create a Custom Toggle Panel

To create a custom toggle panel do the following:

1. Create a custom page object
Use a text editor such as Notepad to create a file in the folder “c:\program files\helpconsole 2010\_engine\”. The file should be in the format “PageObject_{name}.htm”. example: “PageObject_CustomToggle.htm”. Add the following code to the page object file: 

<table class="CustomToggle">
            <td class="TogglePanel_Heading" onclick="if(this.parentNode.parentNode.rows.item(1).style.display==''){this.parentNode.parentNode.rows.item(1).style.display='none';'url(images/col.gif)'}else{this.parentNode.parentNode.rows.item(1).style.display='';'url(images/exp.gif)'}"><span class="CustomToggle_Heading">Toggle Heading</span></td>
        <tr id="trTogglePanel_Body" style="display:none">
            <td class="CustomToggle_Body">Toggle Body</td>

2. Add Styles for the Custom Toggle
Click "Tools > Styles > Skin Stylesheet" and add the following styles:

.CustomToggle {border:1px solid orange}
.CustomToggle_Heading {color:red}
.CustomToggle_Body {padding-left:20px; padding-top:4px; padding-right:4px; padding-bottom:4px; vertical-align:top; color:green}

Edit the custom styles as needed. Add borders, change fonts, add background image, etc.

3. Insert the Custom Toggle
When you want to add a new custom toggle to a page, click the ‘insert page object’ icon and select “CustomToggle”


Applies To

HelpConsole 2010 

 Anonymous said:
3/8/2018 12:45:15 AM

Article ID:
Views: 3047
Created By: admin
Modified By: admin
Created Date: 5/1/2013 3:15 PM
Last Modified: 5/1/2013 3:15 PM
Print This Article
Email This Article
Previous Article
Next Article

Was this page helpful?YesNo