Table of Contents

A table of contents is a great way to help students easily navigate to the desired section of a text-heavy page. Although text-heavy pages should be avoided, this is one way to help make navigation of such a page more manageable. 

 

Example

Click here for an example table of contents.

 

Anatomy of Code Snippet

1. PUT QUESTION HERE __p_ _blockquote_ _table_ _tbody_ _tr_ _td__strong_ _span style=_text-decoration_ underline;__ _a id=_link2A_ href=_#dialog_for_link2A__ A. ANSWER A__a_ __span_ __strong_ _div id=_dialog_for_link (5)-1.png    

 

How to Add a Table of Contents


1. Copy the code snippet:

<div style="border: 1px solid #ebedee; margin: 15px; padding: 10px; position: relative; left: 6px; font-size: 9pt; float: right; width: 20%; background-color: #ebedee;">

<span style="font-size: 18pt;"><strong> Table of Contents</strong></span>

<br />

<br />

<span style="font-size: 12pt;">

<a href="#1stheader">1st Header</a>

</span>

<br />

<span style="font-size: 12pt;">

<a href="#2ndheader">2nd Header</a>

</span>

<br />

<span style="font-size: 12pt;">

<a href="#3rdheader">3rd Header</a>

</span>

</div>

<h3>

<a id="1stheader"></a>1st Header

</h3>

<p>Text goes here.</p>

<h3>

<a id="2ndheader"></a>2nd Header

</h3>

<p>Text goes here.</p>

<h3>

<a id="3rdheader"></a>3rd Header

</h3>

<p>Text goes here.</p>

 

2. Navigate to a content page, click Edit, and select the HTML Editor.

3. Paste the copied snippet & edit the text ID and linked text. Recommended: Edit the actual header itself and the text under the header in the rich tech editor.