Download TOC maker/Content organizer

Download files

You can download the entires script from this Zip file

Configuration

How to write the content that should be organized

You write your content by use of plain HTML like this:

<div id="content_container"> <div class="content_page">
  <h1>Europe</h1>
  <p>Splendida porro oculi fugitant vitantque tueri. </P>
  <h2>Norway</h2>
  <p>Simulacra ferunturet.</P>
  <h3>Oslo</h3>
  </div>
</div>

<div id="content_container"> is the parent element of all your content.

<div class="content_page"> indicates the start of a page. If you have a lot of content, it could be nice to separate it into different "pages". The script will make sure that only the first page is displayed initially. The other pages will be displayed automatically when someone clicks on a link to content on one of them.

Inside of <div class="content_page"> is where you put your actual content. The script will parse your Heading tags(<H1>,<H2>,<H3>,<H4>,<H5> and <H6>) and create a "Table of contents" based on them.

Layout

Most of the layout is controlled by plain CSS. But you also have some Javascript variables available which you can use to control the appearance of content. You define these variables in your HTML file. These are the variables you have available:

var insertNumbers = true;
var insertNumbers_as = [4,1,2,2,2,2];
var previous_txt = 'Previous page';
var next_txt = 'Next page';
var includeNextPreviousLink = true;

var treeDepth = 4;
var tocStyle = 1;
var treeExpandAll = true;
var cssActiveLink = 'font-weight:bold;';

insertNumbers = Dynamically insert numbers in front of headings
insertNumbers_as = How to insert numbers, 1 = digits 0-9, 2 = A,B,C...Z, 3 = a,b,c...z, 4 = Roman I,II,III,IV. This is an array. This means that you could specify that top nodes hould have roman numbers, sub of top nodes should have alphabetical numbers etc.
previous_txt = Text in link to previous page at the bottom of the page
next_txt = Text in link to next page at the bottom of the page
includeNextPreviousLink = Include links to previous and next page at the bottom
treeDepth = 4 = Depth of three. i.e. which headings should we parse(4 = <h1>,<h2>,<h3> and <h4>)
tocStyle = 1; = How to display list table of content in the left column, 1 = As a tree, 2 = Slide menu, 0 = No styling at all, i.e. you set the layout by applying css to #toc_pane ul.
treeExpandAll = true; = If table of contents is displayed as a tree, should all nodes be expanded initially? (true = yes, false = no)
cssActiveLink = CSS rule for active nodes in table of contents. I.e.: This style will be applied when someone clicks on a link

References to external Javascript and CSS files

The scripts refers to CSS and Javascript files for the tree and slide menu. You may remove the references you don't need. This is the code you will find inside your HTML file: