For longer pages, it's helpful to have a mini-TOC to show the various contents. You can implement the Table of Contents jQuery plugin into Oxygen's webhelp.

Tip: For a demo of the mini-TOC, see this https://s3.us-west-1.wasabisys.com/idbwmedia.com/files/oxygendemos/minitoc/

1. Download the minified JS script from the jQuery TOC plugin site. Open the jquery.toc.min.js file and copy its contents.

2. In a text editor, open the JavaScript file located here: [Oxygen Install Directory]/frameworks/dita/DITA-OT/plugins/com.oxygenxml.webhelp/oxygen-webhelp/resources/js/webhelp_topic.js.

3. Insert the minified JS script at the bottom, before the closing });.

4. Add the following trigger below the script:

   $("p.toc").toc({content: ".body", headings: "h2,h3"});

5. Add the following styles to your custom skin's stylesheet:

   p.toc {
   background-color: whitesmoke;
   margin-bottom: 20px;
   list-style-type: square;
   padding: 20px;
   border-radius: 6px;
   float: right;
   margin-left: 20px;
   }
   
   p.toc li {
   margin-bottom: 5px;
   }
   
   
   p.toc h3 {
   margin-left: auto;
   margin-right: auto;
   width: 30%;
   }

6. On a page where you want to insert the TOC, add <p outputclass="toc"/>.

Collected links

Table of Contents jQuery plugin

jQuery TOC plugin site

Sponsored content

---

---