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 h2 and/or h3 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.

Instructions

  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"></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': 'h2,h3',});
    </script> 

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

    js_TOC_h2_h3.png

  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. Best Practices

    On the Live site, the name of your KB space, in addition to the Title of your document will be wrapped in H1 Tags. The image below shows the browser inspect element. The Document Title is highlighted, the red box shows that the document title is wrapped in h1 tags.

    h1

    We recommend that you start your TOC with the h2 tag.

    Note: When working in the KB Admin Tools, the document Title in Editor displays as h2. As a result, you may see the Title of your document among the TOC links. Please know that you will NOT see the title among your TOC in the Live site at all.

    Example of TOC

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

    Sample Doc: 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 13:49 CSTUpdated:2021-07-27 14:06 CST
Sites:KB Demo, KB Demo - Child Demo KB, KB User's Guide
Feedback:  18   3