KB User's Guide - Documents Tab - Creating Table of Contents (TOC) within a KB page using jQuery

A Table of Contents (TOC) at the top of your document can be useful should your document have a lot of content divided by headers. The combination of using a jQuery snippet and wrapping the headers in h3 and/or h4 containers will turn the headers into links at the top of your document. The content will then become easily accessible by clicking on a link. This document will show you how to make a TOC of your very own.

  1. Open your document in HTML mode.
  2. Type the following at the very top of the body field.
  3. <div id="kb-doc-TOC"><ul></ul></div> 

    This is what it should look like on your screen.

    TOCinbodyfield.png

  4. Go to the bottom of the screen and click on the Show Additional Fields plus sign. There you will find a text field called JavaScript/CSS, enter the following:
  5. <script src="/cssjs/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="/cssjs/libs/jquery/1.8.2/jquery.toc.min.js"></script>
    <script type="text/javascript">
    /* Specify elements to be used as TOC heading */
    $('#kb-doc-TOC').toc({'selectors': 'h3,h4',});
    </script> 

    This is what it should look like on your screen. Modify the h3,h4 below to suit your document.


  6. While still in HTML mode, begin entering your headers (as seen below, circled in blue) and content beneath each header. Wrap the headers as in the example below:

  7. You can see the table of contents in action in this document.

    KB User's Guide - Documents Tab -TOC Sample : How To Remove Coffee Stains From Your Clothes




Keywords:table of contents create lines of code extract information from HTML title subtitles content h1 h2 h3 elements assign unique ID append link elements as headers automatic anchors   Doc ID:22302
Owner:Teresa A.Group:KB User's Guide
Created:2012-01-18 14:49 CDTUpdated:2016-08-29 16:33 CDT
Sites:KB Demo, KB Demo - Child Demo, KB User's Guide
Feedback:  6   1