Installed Table of Contents module

I installed a Table of Contents module so we can easily manage long pages with multiple sections.

Here how it looks:

Screen shot of the table of contents

Then I added some styles to position it on the right and highlight the targeted term.

For example if I click #11 the page scrolls down and then the title of the section is highlighted with a dashed line:

Screen shot of the highlighted selected term

Simple; add this to the body of the node: [toc hidden:1]

Here’s the CSS:

/* Table of Contents:
---------------------------------------------------- */
div.content #toc.toc {position:relative; float:right; margin:0 0 1em 1em;}
h2:target, h3:target, h4:target, h5:target, h6:target  {border:dashed green 1px;}
#header:target, #page:target {border:none;}

That last line ensures that the header of the document isn’t highlighted when the top link is clicked.

Leave a Comment