Summary: Adds a dropdown clickable table of contents to a page - client side processing
Version: 1.12, September 4, 2006
Status: Stable
Prerequisites: pmwiki 2.1 and above
Maintainer: Henrik Bechmann (henrik [period] bechmann [snail] sympatico [period] ca)
Categories: Markup, TOC, Layout
Download: quicktoc.zipΔ

Questions answered by this recipe

(click to open)

Quick Page Table of Contents


How to add an automatic table of contents to a wiki page.


This is DHTML (css/html/javascript). The author adds (:quicktoc:) to the wiki source text. The reader sees a collapsed table of contents bar. When the user clicks the bar, the javascript included in the page searches the immediate children of div#wikitext for header elements (h1, h2, h3, h4, h5, h6), and lists these as page links. The table of contents drops over page text, rather than displacing it, and is dismissed when it is clicked.


Quick Page Table of Contents as first presented to the user:

Quick Page Table of Contents after the user clicks on the bar:

Try it yourself here


  1. Download the attached file (quicktoc.zipΔ) to your PmWiki root directory (the one just above cookbook and pub directories). Unzip it. This should result in the following distribution: quicktoc.php in cookbook/; and arrowdown.gif, arrowright.gif, disc.gif, quicktoc.css, and quicktoc.js in pub/quicktoc/.
  2. Add the following line to your config.php file: include_once('cookbook/quicktoc.php');

Add the directive (:quicktoc:) to any wikipage that would benefit from a quick table of contents, usually at the top (the toc floats right).

Release Notes

Version 1.12 Fourth release, September 4, 2006. Modified javascript and css to remove need to specify url for dynamic change to down/right arrow on open/close.

Version 1.11 Third release, August 31, 2006. Repackaged the PmWiki way, much simplifying installation (thanks to Patrick Michaud for direction on this). Added default font size of 9pt.

Version 1.1 Second release, August 30, 2006: menu drops down over text, and is dismissed when clicked anywhere. Top level headings are bolded. TOC title includes "click to open" when closed, and "click to close" when open.

Version 1.0 First release, June 10, 2006


I installed quicktoc (Sept-06) in PmWiki2.1.26 and seem to have one anomaly. On this demo page, the dropdown appears as a one-line option with Quick Page Table of Contents followed by (Click to Open) in a box with a grey background.

On my wiki, the quicktoc function operates as expected, but the dropdown box appears on 2 lines. On the first line, the (Click to Open) option appears right justified on the upper line, with a white background, while the Quick Page Table of Contents appears on the lower line, left justifed and with a grey background.

Formatting is the same using Explorer or Firefox Des September 16, 2006, at 03:07 PM

  • Just experimented and found a quick fix for myself. Added clear:none to the css for h1#quicktocheading but this may not be the ideal fix. Des September 16, 2006, at 03:07 PM
  • I changed in the file quicktoc.php and quicktoc.css "h1" to "h4" and all was fine! January 10, 2007, at 09:07 AM

Also, after comparing the operation on my test page http://www.secretscotland.org.uk/index.php/Secrets/AABatteriesClyde with this page, I've also noticed that the vertical aligment of the header content differs AND this demo page does not display the right or down arrow in the header dropdown, but it does appear on my own page. Des September 16, 2006, at 03:14 PM

See Also

Cookbook /
Accordion  lightweight Accordion javascript requiring no framework (stable)
AutoTOC  Unobtrusive Automatic Table of Contents links (stable)
HandyTableOfContents  Handy Client-side Table of Contents (stable)
NumberedHeaders  Display numbered headers, indented paragraphs and table of contents (Stable)
NumberedSections  Add section numbers on a page (stable)
PageTableOfContents  Adds a clickable table of contents to a page (Stable)
SlimTableOfContents  Simple or Numbered Table of Contents, Compatible with SectionEdit Recipe (not working with php5.5)
TableOfContentsPortion  Inserts a portion of external table of contents into the page (Alpha)


User notes? : If you use, used or reviewed this recipe, you can add your name. These statistics appear in the Cookbook listings and will help newcomers browsing through the wiki.