KB Admin Tools - Adding Page Contents Button and Table of Contents

This document describes how to insert a clickable Page Contents button and automatic table of contents into KB documents. This is a modified and expanded implementation of the method described in KB User's Guide - Documents Tab - Creating Table of Contents (TOC) within a KB page using jQuery. This document is intended to be used by people who create content for the SMPH HR KB.

Overview

This function creates a button labeled "Page Contents" wherever you place it within a KB document. When the user clicks on the Page Contents button, the page displays an automatically generated table of contents with links to Headings in the document based on the Heading levels that you specify. The table of contents will continue to be displayed until the user clicks the Page Contents button again.

Screenshot of Page Contents button and table of contents in a KB documentExample of Panel Contents button and automatic table of contents

Process

Step 1: Add Body code

First you must add HTML code to make the page generate the objects.

  1. Open your document in editing mode
  2. Within Code View in the Body section,  copy and paste the following HTML code wherever you would like the Page Contents button to appear. For best usability, you should place the button near the top of the page, but you can add a small amount of information before it if you feel it's necessary.
    <div class="toc">
    <button class="toc-button" id="tocBtn"><img src="/images/group420/shared/MenuIcon.png" alt="Menu Icon"><span style="font-size:1.5rem;">Page Contents</span></button>
    <div class="toc-content" id="tocDropdown">
    <div id="kb-doc-TOC"></div>
    </div>
    </div>

Step 2: Add JavaScript code

In order for the automatic table of contents and clickable button to work, you also need to add JavaScript code that tells the browser to run those actions.

  1. Expand the Additional Fields found near the bottom of the document editing page, just above the Submit and Reset buttons.
  2. Copy and paste the following code into the JavaScript/CSS field:
    <script>
    document.getElementById("tocBtn").onclick = function() {toggleTOC()};
    function toggleTOC() {
    document.getElementById("tocDropdown").classList.toggle("show");
    }
    </script>
    <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>
  3. As shown here, the code will include all Heading 2 and Heading 3 text in the table of contents that it generates. If you want to change the Heading levels that get included in the table of contents, adjust the code {'selectors': 'h2,h3'} in the second to last line - either 'h2' or 'h2,h3,h4'. The code will not work beyond Heading 4.




Keywords:toc, editor, editing   Doc ID:109944
Owner:Brianna Q.Group:SMPH Human Resources
Created:2021-03-26 13:42 CDTUpdated:2022-03-07 11:01 CDT
Sites:SMPH Human Resources
Feedback:  0   0