BrowseLab Products Demos Support Company Download Pricing
Contents
:
Search:

Home > HelpConsole 2010 > How to Create a Custom Toggle Panel

How to 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">
    <tbody>
        <tr>
            <td class="TogglePanel_Heading" onclick="if(this.parentNode.parentNode.rows.item(1).style.display==''){this.parentNode.parentNode.rows.item(1).style.display='none';this.style.backgroundImage='url(images/col.gif)'}else{this.parentNode.parentNode.rows.item(1).style.display='';this.style.backgroundImage='url(images/exp.gif)'}"><span class="CustomToggle_Heading">Toggle Heading</span></td>
        </tr>
        <tr id="trTogglePanel_Body" style="display:none">
            <td class="CustomToggle_Body">Toggle Body</td>
        </tr>
    </tbody>
</table>

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 


Properties
Article ID:
create_a_custom_toggle_panel
Views: 1147
Created By: admin
Modified By: Aaron
Created Date: 5/1/2013 3:15 PM
Last Modified: 11/20/2014 4:12 PM
Actions
Print This Article
Bookmark
Email This Article
Previous Article
Next Article

Was this page helpful?YesNo