---
title: "DITA: Add a mini-toc on a page"
description: "{% include notes.html %} For longer pages, it's helpful to have a mini-TOC to show the various contents. You can implement the Table of..."
canonical_url: https://idratherbewriting.com/add_mini_toc/index.html
---

> For AI agents: a documentation index is available at https://idratherbewriting.com/llms.txt. Markdown versions of all pages are available by appending .md to any page URL.

# 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](http://ndabas.github.io/toc/#Live_Example) 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/](https://s3.us-west-1.wasabisys.com/idbwmedia.com/files/oxygendemos/minitoc/)

1. Download the minified JS script from the [jQuery TOC plugin site](http://ndabas.github.io/toc/). 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:

   ```xml
   $("p.toc").toc({content: ".body", headings: "h2,h3"});
   ```
5. Add the following styles to your custom skin's stylesheet:

   ```xml
   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](http://ndabas.github.io/toc/#Live_Example)

[jQuery TOC plugin site](http://ndabas.github.io/toc/)