Article Table of Contents

If you will be creating a table of contents inside your headers with links to different sections of content, you can save a bunch of time on setup by using a snippet.

Example

Using this snippet will create a clickable table of contents in list format that links to the h3s in your content. In this article, the snippet is placed after the opening paragraph and before the first header 3:

You can see the Table of Contents that the snippet created near the top of this article.

Setup

To use this snippet...

1. Go to Library > Snippets.
2. Click on Create New Snippet.
3. Give your Snippet a name and a merge code, and choose to hide it from PDFs (since it won't work in this format).
4. Change the editor type to 'Code Editor' first (instead of the WYSIWYG one) and then copy and paste the following code into the Snippet text area: 

   <script id="snippet-prepend">
   $(function(){
   
        var ToC =
     "<nav role='navigation' class='table-of-contents well'>" +
       "<ul>";
        var el, title, link;
        $(".hg-article-body h3").each(function() {
                 el = $(this);
                 title = el.text();
                 anchorTitle = el.text().replace(/([~!@#$%^&*()_+=`{}\[\]\|\\:;'<>,.\/\? ])+/g, '-').toLowerCase();
                 link = "#" + anchorTitle;
                 el.html('<a id="'+anchorTitle+'" class="anchor"></a>' + el.html());
                 newLine =
       "<li>" +
         "<a class='article-anchor' href='" + link + "'>" +
           title +
         "</a>" +
       "</li>";
   
     ToC += newLine;
        });
        ToC +=
      "</ul>" +
     "</nav>";
       $("#snippet-prepend").before(ToC);   
   });
   
   </script>

   Your final snippet should look something like this: 

5. Click Create.
6. Go to Settings > Style.
7. Copy and paste the following styles into your Custom CSS:

   .well {
       background-color: #f5f5f5;
       border: 1px solid #e3e3e3;
       border-radius: 4px;
       box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset;
       margin-bottom: 20px;
       min-height: 20px;
       padding: 5px 30px;
   }
   
   .anchor{
   
     display: block;
     height: 140px; 
     margin-top: -140px; 
     visibility: hidden;
   }

8. Click Save.
9. Copy and paste the merge code for your snippet into any article where you want the table of contents to appear, as shown in the Editor screenshot at the top of this article.

Customization

You can tweak this code to customize the appearance and functionality of your Article Table of Contents.

• Customize the "In this article..." text. 

   "<h2>Quick Links/h2>" 

• Change the "In this article" text from an h2 to a div, p, or any other HTML element. Or remove it :) 

   "<p>In this article:</p>" +

• Customize the script to build the table of contents of header 2s instead of header 3s: 

     $(".hg-article h2").each(function() {