Search results

DITA: Add a mini-toc on a page

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

About Tom Johnson

Tom Johnson

I'm an API technical writer based in the Seattle area. On this blog, I write about topics related to technical writing and communication — such as software documentation, API documentation, AI, information architecture, content strategy, writing processes, plain language, tech comm careers, and more. Check out my API documentation course if you're looking for more info about documenting APIs. Or see my posts on AI and AI course section for more on the latest in AI and tech comm.

If you're a technical writer and want to keep on top of the latest trends in the tech comm, be sure to subscribe to email updates below. You can also learn more about me or contact me. Finally, note that the opinions I express on my blog are my own points of view, not that of my employer.