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>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;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.

See Also:

KB User's Guide - Advanced HTML - Show/Hide Detailed Steps