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.
Click the plus signs below to expand the example sections below. Once expanded, click the minus sign and the section will collapse.
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>
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>
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>
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>
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>
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 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