Create a Table of Contents automatically
Much like the author of this article, our company needs a way to automatically generate a table of contents for large articles. After finding out we can use jQuery, I put together a script that will automagically create a tiered table of contents based on the Header tags used in the article.
All you need to do is paste the Javascript in this page into the Javascript section of your Articles:
Click on the JS tab, then paste in the code at the end:
That should do it.. as long as you've used proper heading tags (H1, H2, etc), a Table of Contents will be created any time you load the article.
You can see a live example here: http://codepen.io/ngalluzzo/pen/kXqyVQ?editors=1010
-
Hey Iris, glad to hear it works!
Yes, it is doable to have it on the right or left side but that requires some design/CSS changes in the layout.
If you have someone in your team familiar with CSS he/she can do that for sure.
-
Vladan, thank you very much for sharing. I've incorporated the code into the article_page.hbs template of our HC and it works great. I had played around a bit with the JS version but couldn't get it to run properly (could be due to a highly customized HC with category accordians, etc).
Thanks again for a fantastic ToC solution!
-
Hey all,
Just an FYI this line:
var $anchorname = $heading[0].outerText.replace (/\s/g,'');
should be changed to:
var $anchorname = $heading[0].innerText.replace (/\s/g,'');
This will make it work on Firefox browsers.
<script>
/* ============================================================================================== */
/* ============================== Custom Article Table of Contents ============================== */
/* ============================================================================================== */
var $headers = $('.article-body:first h1');
if ($headers.length == 0) $headers = $('.article-body:first h2');
if ($headers.length > 0) {
var $toc = $('<div class="toc" style="margin-bottom: 25px">');
var $firstUl = $('<ul>');
var $currentUl = $firstUl;
var previous_level = 1;
var $arrayUl = [];
$firstUl.appendTo($toc);
$('#table-of-contents').length > 0 ? $toc.appendTo('#table-of-contents') : $toc.prependTo('.article-body:first');
// start with first H1
insertHeading($headers[0]);
}
function insertHeading(heading) {
var $heading = $(heading);
// what level heading are we on?
var current_level = headingLevel(heading);
// if it's an H1, add it to the original list
if (current_level === 1) {
newLi($heading, $firstUl);
$currentUl = $firstUl;
$arrayUl = [];
$arrayUl.push($firstUl);
}
// if it's the same as the one before it, add it to the current list
else if (current_level === previous_level) {
newLi($heading, $currentUl);
}
// if it's one level higher than the one before it... time to make a new nested list
else if (current_level > previous_level) {
nestUl();
$arrayUl.push($currentUl);
newLi($heading, $currentUl);
}
else if (current_level<previous_level){
for (i = 0; i < (previous_level-current_level); i++) {
$arrayUl.pop();
}
$currentUl = $arrayUl[$arrayUl.length-1];
newLi($heading, $currentUl);
}
previous_level = current_level;
var $nextHeading = $heading.nextAll("h1, h2, h3, h4, h5, h6").first()[0];
// if there's any headings left... run this again
if ($nextHeading) insertHeading($nextHeading);
}
// adds a new UL to the current UL
function nestUl() {
var $newUl = $('<ul>');
$newUl.appendTo($currentUl);
$currentUl = $newUl;
}
// returns a numerical value for each heading
function headingLevel(heading) {
switch (heading.nodeName) {
case 'H1':
return 1;
break;
case 'H2':
return 2;
break;
case 'H3':
return 3;
break;
case 'H4':
return 4;
break;
case 'H5':
return 5;
break;
case 'H6':
return 6;
break;
default:
return 0;
}
}
// inserts a new line to the current list
function newLi(heading, $list) {
var $heading = $(heading);
if ($heading.text().replace(/\s/g, '') == '') return null;
var $wrapper = $('<li></li>');
//var $link = $('<a>').prop('href', '#' + $heading.prop('id'));
var $anchorname = $heading[0].innerText.replace (/\s/g,'');
var $link = $('<a>').prop('href', '#' + $anchorname);
$link.html($heading.text());
$link.appendTo($wrapper);
$wrapper.appendTo($list);
var place_in_parent = $list.children('li').length;
$heading.html("<a name=\"" + $anchorname + "\"></a>" + $link.find('.index').text() + ' ' + $heading.text());
}
</script> -
Am I missing something with implementing this code?
Reading the thread, and taking the last post from @Tim, I understand the totality of the implementation path being this:
- In Guide, go to /theming/workbench
- Select your theme, and press view theme.
- press Edit code.
- Edit script.js, and add the code to the end of the file. Save changes.
And that's it - it should display right?
Having followed these steps on my Guide instance, running the Copenhagen theme, I don't get anything let alone the change i'm expected.
Here's a page from my Guide instance which I would hope gets this auto TOC:
https://help.wafresh.com.au/hc/en-au/articles/360007488692-What-happens-if-an-item-is-out-of-stock-or-unavailable-Appreciate any help or feedback to understand where I'm going wrong.
-
@Michael H
You want to put it in the article_page.hbs file, not script.js
-
@Tim Capone
Does it matter where in article-Page.hbs you put this script? I've tried adding this to a default Copenhagen theme, and I'm not seeing anything.
I used Vladan's script and it worked fine.
-
@Paul LaBarbera
I put my code on the bottom of the script.
It's working on Firefox, Chrome, Internet Explorer, and Edge for me.
-
Hi,
Per Tim's comment from last week:
>> It's working on Firefox, Chrome, Internet Explorer, and Edge for me.
Does anyone know if this code is browser-dependent? A former colleague who contributed to this thread (Nick Smolnehy) implemented this feature here. I believe he made some additions to the original code.
Using Chrome, it's been working great, but I started using Firefos yesterday, and:
1. The TOC itself does not display.
2. The headings throughout the document are not auto-numbered e.g2.1.3 Modify Vendor
appears as
Modify Vendor
Thanks.
-
Hey everyone, check out this article which has a modified Javascript code that uses "H2" size for TOC headings. The original source code can be found in Github here which uses the WYSISYG editor "Huge" size for the TOC. Both worked for my Help Center in wonderful fashion. I prefer the original source code since it allowed the ability to give the TOC a custom placeholder name and hyperlinks the "Huge" headings. Highly recommend for anyone looking to add a nice looking Table of Contents.
To install, simply add the code snippet to your "Script.js" page below "$(document).ready(function() {" in your theme editor.
You can see an example below:
Please sign in to leave a comment.
39 Comments