KB User's Guide - Documents Tab - Show/Hide Toggles
This document explains and demonstrates the Show/Hide Toggle functionality. This functionality allows document authors (in HTML editor) to create expandable and collapsible sections in KB documents.
Show/Hide Toggle sections in action
Click the plus signs below to expand the example sections below. Once expanded, click the minus sign and the section will collapse.
- Paragraph (with class attribute)
-
This is a paragraph of text that can be shown or hidden by clicking the plus sign.
Here is the source code needed to accomplish this in your own document:<ul id="toggle" class="toggle"> <li><strong> Paragraph (with class attribute)</strong> <ul> <li> <p>This is a paragraph of text that can be shown or hidden by clicking the plus sign.</p> </li> </ul> </li> </ul>
-
- Paragraph (without class attribute)
-
Note the little bullet here because the class attribute was not used. This is a paragraph of text that can be shown or hidden by clicking the plus sign.
Here is the source code needed to accomplish this in your own document:
<ul id="toggle5"> <li><strong> Paragraph (without class attribute)</strong> <ul> <li> <p>Note the little bullet here because the class attribute was not used. This is a paragraph of text that can be shown or hidden by clicking the plus sign.</p> </li> </ul> </li> </ul>
-
- Ordered List of links to other documents
- KB User's Guide - Documents Tab - How to Create a Document
- KB User's Guide - Documents Tab - Editing an existing doc
-
Here is the source code needed to accomplish this in your own document:
<ul id="toggle1"> <li><strong> Ordered List of links to other documents</strong> <ol> <li><a href="page.php?id=5235">KB User's Guide - Documents Tab - How to Create a Document</a></li> <li><a href="page.php?id=5252">KB User's Guide - Documents Tab - Editing an existing doc</a></li> </ol> </li> </ul>
- Unordered List of links to other documents
- KB User's Guide - Documents Tab - How to Create a Document
- KB User's Guide - Documents Tab - Editing an existing doc
-
Here is the source code needed to accomplish this in your own document:
<ul id="toggle6"> <li><strong> Unordered List of links to other documents</strong> <ul> <li><a href="page.php?id=5235">KB User's Guide - Documents Tab - How to Create a Document</a></li> <li><a href="page.php?id=5252">KB User's Guide - Documents Tab - Editing an existing doc</a></li> </ul> </li> </ul>
- No Bullet List of links to other documents
- KB User's Guide - Documents Tab - How to Create a Document
- KB User's Guide - Documents Tab - Editing an existing doc
-
Here is the source code needed to accomplish this in your own document:
<ul id="toggle7" class="toggle7"> <li><strong> No Bullet List of links to other documents</strong> <ul> <li><a href="page.php?id=5235">KB User's Guide - Documents Tab - How to Create a Document</a></li> <li><a href="page.php?id=5252">KB User's Guide - Documents Tab - Editing an existing doc</a></li> </ul> </li> </ul>
- Image
-
Here is the source code needed to accomplish this in your own document:
<ul id="toggle2" class="toggle2"> <li><strong> Image</strong> <ul> <li><img src="/images/group41/19085/justneedascreenshot.png" title="justneedascreenshot.png" alt="justneedascreenshot.png" height="471" width="528"> <br /><br /></li> </ul> </li> </ul>
- Table
-
Table Cell Table Cell Table Cell Table Cell
-
Here is the source code needed to accomplish this in your own document:
<ul id="toggle3" class="toggle3"> <li><strong> Table</strong> <ul> <li> <table border="1" cellpadding="3" cellspacing="3" width="400"> <tbody><tr> <td>Table Cell</td> <td>Table Cell</td> </tr> <tr> <td>Table Cell</td> <td>Table Cell</td></tr></tbody></table></li></ul></li></ul>
-
Caveats and Cautions
- The id="toggle#" attribute must have a unique number (from 0-80) for the Show/Hide Toggling to work correctly. See source code examples in this document.
- Show/Hide Toggles available only in HTML editor mode (not WYSIWYG).
- The JavaScript that controls the Show/Hide Toggle is limited to 81 Show/Hide Toggles per document and can be increased further if needed.
- The class attribute controls the display of bullets. Show/Hide Toggle sections are created by wrapping section content in a couple <ul> tags. The first <ul> tag will have the following attributes: id="toggle" and class="toggle". This triggers the javascript to render the Show/Hide Toggles. The 'class' attribute is optional. If not used bullets will be displayed. See links in the Show/Hide examples below for samples of the code needed to generate Show/Hide Toggles with and without bullets.
- Cannot preview Show/Hide Toggles in the Preview popup. Use the Review screen to test the show/hide functionality. This popup will remind document authors of this:
Please note that show/hide toggles do not work in this preview window as they do on review or live pages.