(click to open)

Quick Page Table of Contents


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: Attach: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:

Attach:quicktocclosed.jpg Δ

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

Attach:quicktocopen.jpg Δ

Try it yourself here


  1. Download the attached file (Attach: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)
QuickPageTableOfContents  Adds a dropdown clickable table of contents to a page - client side processing (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)


 0: 00.00 00.00 config start
 1: 00.00 00.00 config end
 2: 00.03 00.02 MarkupToHTML begin
 3: 00.05 00.05 ReadApprovedUrls SiteAdmin.ApprovedUrls begin
 4: 00.05 00.05 ReadApprovedUrls SiteAdmin.ApprovedUrls end
 5: 00.11 00.10 FPLTemplate: Chain begin
 6: 00.11 00.10 FPLTemplate: FPLTemplateLoad
 7: 00.11 00.10 FPLTemplate: FPLTemplateDefaults
 8: 00.11 00.10 FPLTemplate: FPLTemplatePageList
 9: 00.11 00.10 MakePageList pre
10: 00.11 00.10 PageListSources begin
11: 00.11 00.10 PageStore::ls begin wiki.d/{$FullName}
12: 00.12 00.11 PageStore::ls merge wiki.d/{$FullName}
13: 00.13 00.12 PageStore::ls end wiki.d/{$FullName}
14: 00.13 00.12 PageStore::ls begin $FarmD/wikilib.d/{$FullName}
15: 00.13 00.12 PageStore::ls merge $FarmD/wikilib.d/{$FullName}
16: 00.13 00.12 PageStore::ls end $FarmD/wikilib.d/{$FullName}
17: 00.14 00.13 PageListSources end count=9918
18: 00.14 00.13 PageListTermsTargets begin count=9918
19: 00.14 00.13 PageIndexGrep begin
20: 00.16 00.15 PageIndexGrep end
21: 00.17 00.15 PageListTermsTargets end count=9
22: 00.17 00.15 PageListSort pre ret=4 order=name
23: 00.17 00.15 MakePageList items count=9, filters=PageListTermsTargets
24: 00.17 00.15 MakePageList post count=9, readc=9
25: 00.17 00.15 PageListSort begin
26: 00.17 00.15 PageListSort sort
27: 00.17 00.15 PageListSort end
28: 00.17 00.15 MakePageList end
29: 00.17 00.15 FPLTemplate: FPLTemplatePmWikiOrg
30: 00.17 00.15 MarkupToHTML begin
31: 00.17 00.16 MarkupToHTML end
32: 00.17 00.16 FPLTemplate: FPLTemplateSliceList
33: 00.17 00.16 FPLTemplate: FPLTemplateFormat
34: 00.18 00.16 MarkupToHTML begin
35: 00.18 00.17 MarkupToHTML end
36: 00.18 00.17 FPLTemplate: FPLTemplatePmWikiOrgPostFormat
37: 00.18 00.17 FPLTemplate: Chain end
38: 00.19 00.17 MarkupToHTML end
39: 00.19 00.17 MarkupToHTML begin
40: 00.20 00.19 MarkupToHTML end
41: 00.20 00.19 MarkupToHTML begin
42: 00.21 00.19 MarkupToHTML end
43: 00.21 00.19 now
Peak memory: 5,924,488 bytes