You can implement a mini-table of contents on the page to increase readability

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

Stay current with the latest in tech comm
Keep current with the latest trends in technical communication by subscribing to the I'd Rather Be Writing newsletter. 4,500+ subscribers