DITA: Add a mini-toc on a page

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.

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"/>.