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>
  •  Image
    • justneedascreenshot.png

    • 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:

    showhidepreview.png

    Please note that show/hide toggles do not work in this preview window as they do on review or live pages.

See Also:




Keywords:expand collapse areas of interest plus sign collapsible collapsing sections show hide command toggles toggling functionality toggle effect hide/show effect visible invisibletoggling expanding   Doc ID:19085
Owner:Teresa A.Group:KB User's Guide
Created:2011-07-10 19:00 CDTUpdated:2016-08-29 16:33 CDT
Sites:KB Demo, KB User's Guide
Feedback:  3   1