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 panel panels open close opens closes opening closing   Doc ID:19085
Owner:Leah S.Group:KB User's Guide
Created:2011-07-10 18:00 CSTUpdated:2021-12-09 15:19 CST
Sites:KB User's Guide
Feedback:  1   0