Add Table of Contents to a Wiki page in SharePoint 2010

The content of wiki pages can get really long sometimes. My client has asked me to create a table of contents like the one that is used in Word documents to navigate to contents. This article online was quite helpful to get me started. In the article, the author added scripts to the wiki page layout. In my case, my client didn’t use publishing pages. So I added the scripts to web parts and then add the web parts to the content.

Note: This method is based on the use of H1, H2, H3, H4 tags. It wouldn’t work if there is no tags to the content.

Here are the steps:

1. Create a text file using Notepad, name it table_of_contents.txt. Copy the following code to the file

<!-- Table of Contents --> 
<div id="wiki-index"> 
<div class="toc">Table of Contents</div> 
</div> 
<!-- Table of Contents -->

<script type="text/javascript"> 
$(document).ready(function(){ 
$(".ms-bodyareacell H1.ms-rteElement-H1, 
H2.ms-rteElement-H2, H3.ms-rteElement-H3, 
H4.ms-rteElement-H4").each(function(i){   
var current = $(this);   
current.attr("id", "title" + i);   
$("#wiki-index").append(("<a id='link" + i + "' href='#title" +         
i + "' title='" + current.attr("class") + "'>" +         
current.html() + "</a>"));         
}) }); 
</script>

<style> 
#wiki-index{border: 1px black dashed; 
background-color: whitesmoke; float: left; 
padding: 10px; padding-top: 0px; } 
#wiki-index .toc{font-size: 1.1em; 
font-weight: bold; text-align: center; 
padding: 5px; }
#wiki-index a[title=ms-rteElement-H1] 
{ font-size:14px; font-weight: bold} 
#wiki-index a[title=ms-rteElement-H2] 
{ font-size:12px; font-weight: normal} 
#wiki-index a[title=ms-rteElement-H2] div 
{ margin-left: 10px;} /*Add indent in front*/
#wiki-index a[title=ms-rteElement-H3] 
{ font-size:10px;} 
#wiki-index a[title=ms-rteElement-H3] div 
{ margin-left: 15px;} /*Add indent in front*/
#wiki-index a[title=ms-rteElement-H4] 
{ font-size:8px;} 
#wiki-index a[title=ms-rteElement-H4] div 
{ margin-left: 20px;} /*Add indent in front*/
</style>

The above code contains html, jQuery and CSS. The jQuery scripts append links of H1, H2, H3 and H4 text to the end of the Table of Contens.

2. Open the site collection in SharePoint Designer 2010. Import the text file to Site Assets or Style Library folder.

3. Right click on the text file, select “Properties”. Copy the location URL.

4. Go back to the browser. Edit the page and insert a Content Editor Web Part to the content area.

5. Edit the Content Editor Web Part and enter the URL copied in step 3 to the content link text box. Test the link, make sure it works.

6. Save the page. That’s it. You can export the above contnet editor web part and upload it to the web part gallery for reuse on other pages.

Tips:

When user jumps to the very bottom of a wiki page, it may take a while to scroll back up. A back to top button might be useful in this case. Here’s how to add one. Note: The following steps need to work with the table of contents.

1. Create another text file using Notepad, name it top_button.txt. Copy the following code to the file

<div class="top_button">
<a href="#wiki-index">Back to Top</a>
</div>

<style>

/*Display the button to the right of the content*/ 
.top_button {  float:right; }

</style>

2. Open the site collection in SharePoint Designer 2010. Import the text file to Site Assets or Style Library folder or wherever you stored the table_of_contents.txt file above.

3. Follow step 3-6 in the first part of this article. Note: Need to move the web part to the bottom of a section or the page. You can have as many of this web part as needed.

Reference:

http://www.n8d.at/blog/enhance-wiki-page-layout-by-adding-a-navgational-table-of-contents/

http://www.jankoatwarpspeed.com/automatically-generate-table-of-contents-using-jquery/