Recent searches
No recent searches
Tip: How to make a Table Of Contents (TOC) For Article Template
Posted Sep 01, 2021
Prerequisite:
File Name: article_page.hbs, style.css, script.js file
Time To Read: Max 2 min
Time To Embed: Max 4 min
Here's a way to create a table of contents in your Article template, that ensures subheadings will be properly indented instead of aligned with the main headings
2 min read to learn how to customize the theme.
You can use the free plugin by Nikhil Dabas. You can embed easily in your theme, see the below steps:
1). Download the plugin and unzip.
2). Upload the JS files into your assets folder of your Help Centre. See the below screenshot.
3). Now, link the jquery.toc.min.js file and the jQuery library onto your document_head.hbs file, the plugin is jQuery based.
4). Call the TOC function on your script.js file at the bottom area under the Document function.
5). At the end, add the div to show the TOC on the article template.
The output is:
Thanks
3
50 comments
Anh Le
Done. But the format is still ugly.
0
Eugene
I followed the coding and instructions on this article, but the TOC is still not showing up in my articles. I'm sure if I got any of the coding wrong, but is it possible to provide your examples in code block?
0
Ifra Saqlain
Hi Eugene, can you share your Help Centre URL here?
0
Eugene
Ifra Saqlain believe it or not, I redid the code and it worked, I was an absolute idiot, thanks for the guide!
0
Ifra Saqlain
It happens when we do coding (I also do mistakes many times when I write code) so don't say idiot for yourself :),
0
Elizabeth Brown
Hey folks,
I want to use this tip to create automated ToCs.
I also want to control where the ToC appears - ideally after the first couple of intro sentences, which provide context and tell you who can use the feature (which plan it's on).
Is there any scope for creating an automated ToC that you can insert manually? or would this script not allow that option?
I am primarily a content person not a code person, so I don't know if what I'm asking is feasible or not.
Please advise?
Cheers
EB
0
Rachel Nix
Jaïs Pingouroux how do you add the show_toc label to your article?
0
Ifra Saqlain
If you have been add TOC for your artcles, then you have the toc div on your article_page.hbs file:
You only need to put the element above the toc div, like:
0
Jeremy
Thank you for sharing this! Just added this to our help center and the script still works great!
0
Ifra Saqlain
Hi Jeremy, I'm glad that it works for you :)
0
Sandy Midili
I need some help trying to understand what previous consultants did and modify the Table of Contents that is labeled "On This Page," which is in a box on the right of my articles. Currently, our code only adds headers into the On This Page box if they are header 2. I want to add header 3 and header 4. It looks like they may have used a modified Copenhagen Theme. The Theme version is 2.0.0 and Templating API v2.
I have searched the help files and community to no avail. I am hoping you can help. I am new at ZenDesk and coding. The consulting company is no longer around for me to ask questions. So I apologize for my ignorance. Any help would be greatly appreciated. Thank you.
See the screenshot of a sample of an article below:
Here is the document_head.hbs file that looks similar to the first post, but line 7 has a 3.5.1 in it instead of 3.6.0
Here is the section of the article_page.hbs file that references the table of contents. I did try to add a simple addition of .content h3 into the code, but that does not work.
Here is my script.js file, in which I can't find any mention of the table of contents:
(function() {
"use strict";
ready(function() {
// Restore focus after page reload
var returnFocusTo = sessionStorage.getItem('returnFocusTo');
if (returnFocusTo) {
sessionStorage.removeItem('returnFocusTo');
var returnFocusToEl = document.querySelector(returnFocusTo);
returnFocusToEl && returnFocusToEl.focus && returnFocusToEl.focus();
}
// Open social sharing links in a new window
each('.share a', function(a) {
a.addEventListener('click', function(e) {
e.preventDefault();
window.open(this.href, '', 'height = 500, width = 500');
});
});
// Render inline micro-templates
each('[data-element="template"]', function(el) {
if (el.hasAttribute('data-template')) {
Util.renderTemplate(el, el.getAttribute('data-template'));
}
});
// Add focus classname to search field
each('.form-field [type="search"]', function(el) {
el.addEventListener('focus', function() { this.parentNode.classList.add(Util.classNames.FOCUS); });
el.addEventListener('focusout', function() { this.parentNode.classList.remove(Util.classNames.FOCUS); });
});
// Replace images with inline SVG
Array.prototype.forEach.call(document.querySelectorAll('[data-inline-svg]'), Util.replaceWithSVG);
// Smooth scroll
function maybeScroll() {
var smoothScroll = Util.getURLParameter('smooth-scroll', window.location);
if (smoothScroll === 'true' && window.location.hash) {
var offset = Util.getURLParameter('offset', window.location);
var target = document.getElementById(window.location.hash.substring(1).split("?")[0]);
Util.scrollIntoView(target, offset);
}
}
window.addEventListener('hashchange', maybeScroll, false);
maybeScroll();
/**
* Collapsible nav plugin.
* @param el
* @constructor
*/
function CollapsibleNav(el) {
this.el = el;
el.addEventListener('click', this.onClick.bind(this));
}
CollapsibleNav.prototype = {
onClick: function(e) {
var maxHeight = window.getComputedStyle(this.el).maxHeight;
if (maxHeight === 'none') {
return;
}
var isExpanded = this.el.getAttribute('aria-expanded') === 'true';
var navLink = e.target;
if (isExpanded) {
// Close the nav if the clicked link is selected
if (navLink.getAttribute('aria-selected') === 'true') {
this.el.setAttribute('aria-expanded', 'false');
this.el.classList.remove('is-expanded');
navLink.setAttribute('aria-selected', 'false');
e.preventDefault();
}
} else {
// Open the nav if it's closed
this.el.setAttribute('aria-expanded', 'true');
this.el.classList.add('is-expanded');
navLink.setAttribute('aria-selected', 'true');
e.preventDefault();
}
}
};
each('.collapsible-nav', function(nav) {
new CollapsibleNav(nav);
});
window.CollapsibleNav = CollapsibleNav;
(function() {
"use strict";
});
})();
});
})();
0
Ifra Saqlain
Hi Sandy Midili, welcome to the Community :)
Do you want to add headers like below?
0
Sandy Midili
Ifra Saqlain Saqlain What I really want to do is just modify the "On this page" box, which I think is a table of Contents. It currently only shows Header 2. I would want to include H3, and H4 with indentations.
Here is my Articles guide.hbs template file:
{{!----------------------------
1st Hero element - search bar
---------------------------}}
<div class="hero relative overflow-hidden{{#is settings.hero_image_style 'standard'}} bg-home bg-cover bg-center{{/is}}">
{{!--------------------
Hero element content
--------------------}}
<div class="relative container z-30 py-5{{#if settings.fixed_header}}{{#unless settings.header_height}} mt-8{{/unless}}{{/if}}"{{#if settings.fixed_header}}{{#if settings.header_height}} style="margin-top: {{settings.header_height}};"{{/if}}{{/if}}>
{{!-----------------------
Hero element search bar
-----------------------}}
<div class="search search-lg relative {{#if settings.search_translucent}} search-translucent blur{{/if}} font-size-lg text-base my-4{{#is settings.hero_content_alignment 'center'}} mx-auto{{/is}}">
<h2 class="sr-only">{{ t 'search' }}</h2>
{{~#if settings.search_placeholder}}
{{#if settings.use_translations}}
{{search class='form-field mb-0' instant=settings.instant_search scoped=settings.scoped_kb_search submit=settings.show_search_button placeholder=(dc settings.search_placeholder)}}
{{else}}
{{search class='form-field mb-0' instant=settings.instant_search scoped=settings.scoped_kb_search submit=settings.show_search_button placeholder=settings.search_placeholder}}
{{/if}}
{{else}}
{{search class='form-field mb-0' instant=settings.instant_search scoped=settings.scoped_kb_search submit=settings.show_search_button}}
{{/if~}}
<svg class="search-icon transition" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" aria-hidden="true">
<use xlink:href="#icon-search" />
</svg>
</div>
</div>
{{#isnt settings.hero_image_style 'standard'}}
{{#isnt settings.hero_image_style 'parallax'}}
{{!-------------------------------
Hero background image (overlay)
-------------------------------}}
<div class="absolute z-20 top-0 left-0 h-full w-full bg-home{{#is settings.hero_image_style 'overlay'}} bg-cover bg-center{{/is}}{{#is settings.hero_image_style 'overlay-pattern'}} bg-contain bg-repeat{{/is}}"></div>
{{/isnt}}
{{/isnt}}
{{!---------------------
Hero background color
---------------------}}
<div class="absolute z-10 top-0 left-0 h-full w-full bg-hero"></div>
{{#is settings.hero_image_style 'parallax'}}
{{!--------------------------------
Hero background image (parallax)
--------------------------------}}
<div class="absolute z-0 top-0 left-0 w-full h-full">
<div class="relative w-full h-full overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-home bg-cover bg-center" x-data="Widgets.parallaxImage" style="height: 150%"></div>
</div>
</div>
{{/is}}
</div> {{! /.hero }}
<div class="header-separator p-header-separator m-header-separator"></div>
{{!-----------------------------
2nd Hero element - categories
---------------------------}}
<div class="hero relative overflow-hidden{{#is settings.hero_image_style 'standard'}} bg-home bg-cover bg-center{{/is}}">
{{!--------------------
Hero element content
--------------------}}
<div class="relative container z-30 py-2">
{{!--------------
Category pills
--------------}}
<nav class="scroll-container mt-2 mb-2">
<div class="scroll-x" data-element="navigation" data-template="category-pills"></div>
</nav>
</div>
{{!---------------------
Hero background color
---------------------}}
<div class="absolute z-10 top-0 left-0 h-full w-full bg-hero"></div>
{{#is settings.hero_image_style 'parallax'}}
{{!--------------------------------
Hero background image (parallax)
--------------------------------}}
<div class="absolute z-0 top-0 left-0 w-full h-full">
<div class="relative w-full h-full overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-home bg-cover bg-center" x-data="Widgets.parallaxImage" style="height: 150%"></div>
</div>
</div>
{{/is}}
</div> {{! /.hero }}
{{!------------------
Section name banner
-----------------}}
<div class="section-name-on-article-page">
<div class="relative container z-30 py-4">
<p title="{{section.name}}" class="section-name-banner font-size-3xl">
{{section.name}}
</p>
</div>
</div>
<div class="container flex-1 -mb-6" id="page-container">
<div class="row row-lg lg:h-full">
<article class="col pb-6 {{#isnt settings.article_sidebar 'none'}}lg:{{/isnt}}pt-4" itemscope itemtype="http://schema.org/Article">
{{!----------------------------
Breadcrumbs
---------------------------}}
<nav class="col font-size-sm" style="color: blue;">
{{breadcrumbs}}
</nav>
{{!--------------
Article header
--------------}}
<header class="mb-5">
<h1 title="{{article.title}}" itemprop="name">
{{article.title}}
{{#if article.internal}}
<svg class="svg-icon text-base font-size-xl ml-1 mb-1" xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 16 16">
<title>{{t 'internal'}}</title>
<rect width="12" height="9" x="2" y="7" fill="currentColor" rx="1" ry="1"/>
<path fill="none" stroke="currentColor" d="M4.5 7.5V4a3.5 3.5 0 017 0v3.5"/>
</svg>
{{/if}}
</h1>
{{!----------------
Article metadata
----------------}}
<div class="flex{{#is settings.article_metadata 'none'}}{{#unless settings.show_follow_article}} hidden{{/unless}}{{/is}}">
<div class="media">
{{#is settings.article_metadata 'author'}}
<div class="avatar">
{{#if article.author.agent}}
<svg class="svg-icon absolute bottom-0 right-0 text-primary bg-white border border-white circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" aria-hidden="true">
<use xlink:href="#icon-agent" />
</svg>
{{/if}}
<img class="avatar-img" alt="{{article.author.name}}" src="{{article.author.avatar_url}}">
</div>
{{/is}}
{{#isnt settings.article_metadata 'none'}}
<div class="media-body font-size-md align-self-center{{#is settings.article_metadata 'date-end'}}{{#unless comments}} hidden{{/unless}}{{/is}}">
{{#is settings.article_metadata 'author'}}
{{#link 'user_profile' class="link-implied" id=article.author.id}}
{{article.author.name}}
{{/link}}
{{#each article.author.badges}}
{{#is category_slug "titles"}}
<span class="badge bg-primary text-primary-inverse py-1 pr-2 mx-2" title="{{description}}" aria-label="{{name}}">
{{#if icon_url}}
<img src="{{icon_url}}" alt="{{description}}" />
{{/if}}
{{name}}
</span>
{{/is}}
{{/each}}
{{#each article.author.badges}}
{{#is category_slug "achievements"}}
{{#if icon_url}}
<img width="22" height="22" src="{{icon_url}}" alt="{{name}}" title="{{name}} | {{description}}" aria-label="{{name}}" />
{{/if}}
{{/is}}
{{/each}}
{{/is}}
<ul class="list-divider">
{{#isnt settings.article_metadata 'date-end'}}
<li class="text-gray-600">
{{#is article.created_at article.edited_at}}
{{date article.created_at timeago=true}}
{{else}}
{{t 'updated'}}
{{date article.edited_at timeago=true}}
{{/is}}
</li>
{{/isnt}}
{{#if settings.show_article_comments}}
{{#if comments}}
<li class="text-gray-600">
<a href="#comments">
{{t 'comments_count' count=article.comment_count}}
</a>
</li>
{{/if}}
{{~/if}}
</ul>
</div>
{{/isnt}}
{{#if settings.show_follow_article}}
{{! Subscribe link }}
<div class="subscribe-article">
{{subscribe}}
</div>
{{/if}}
</div>
</div>
</header>
{{!-------------------------------
Article content and attachments
-------------------------------}}
<section class="content article-content mb-6" itemprop="articleBody">
{{~#isnt settings.table_of_contents_style 'none'}}
{{~#isnt settings.table_of_contents_style 'sidebar-left'}}
{{~#isnt settings.table_of_contents_style 'sidebar-right'}}
{{!-----------------
Table of Contents
-----------------}}
<div id="table-of-contents" data-element="table-of-contents" data-template="table-of-contents" data-selector=".content h2, .content h3"></div>
{{/isnt~}}
{{/isnt~}}
{{/isnt~}}
{{! Article content and attachments }}
{{article.body}}
{{#if attachments}}
<ul class="list-unstyled my-6">
{{#each attachments}}
<li class="list-item">
<svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" stroke="currentColor" stroke-linecap="round" d="M9.5 4v7.7c0 .8-.7 1.5-1.5 1.5s-1.5-.7-1.5-1.5V3C6.5 1.6 7.6.5 9 .5s2.5 1.1 2.5 2.5v9c0 1.9-1.6 3.5-3.5 3.5S4.5 13.9 4.5 12V4"/>
</svg>
<a class="mr-2" href="{{url}}" target="_blank">{{name}}</a><span class="font-size-md text-gray-600">{{size}}</span>
</li>
{{/each}}
</ul>
{{/if}}
{{#is settings.article_metadata 'date-end'}}
{{! Article metadata }}
<p class="text-gray-600 mt-6">
{{#is article.created_at article.edited_at}}
{{date article.created_at timeago=true}}
{{else}}
{{t 'updated'}}
{{date article.edited_at timeago=true}}
{{/is}}
</p>
{{/is}}
</section>
{{~#if settings.show_article_sharing}}
{{!---------------
Article sharing
---------------}}
{{#if settings.share_title}}
<div class="flex mt-6">
<span class="h5 my-0 mr-4">
{{#if settings.use_translations}}
{{dc settings.share_title}}
{{else}}
{{settings.share_title}}
{{/if}}
</span>{{share}}
</div>
{{else}}
<div class="mt-6">
{{share}}
</div>
{{/if}}
{{/if}}
{{~#isnt settings.article_navigation_style 'none'}}
{{!------------------
Article navigation
------------------}}
<div
class="my-6 next-prev-article border-top border-bottom"
data-element="article-navigation"
data-template="article-navigation"
data-next-title="{{#if settings.use_translations}}{{dc settings.next_article_title}}{{else}}{{settings.next_article_title}}{{/if}}"
data-previous-title="{{#if settings.use_translations}}{{dc settings.previous_article_title}}{{else}}{{settings.previous_article_title}}{{/if}}">
</div>
{{/isnt~}}
{{#if settings.show_article_voting}}
{{!--------------
Article voting
--------------}}
{{#with article}}
<div class="py-4 my-6 text-center border-top border-bottom">
<h4 class="font-medium">
{{t 'was_this_article_helpful'}}
</h4>
<div class="mb-4" role="group">
{{vote 'up' class='button button-outline-primary' selected_class='is-active' role='radio'}}
{{vote 'down' class='button button-outline-primary' selected_class='is-active' role='radio'}}
</div>
{{vote 'label' class='block text-gray-600 font-size-sm mb-4'}}
<p class="my-5">
{{../request_callout}}
</p>
</div>
{{/with}}
{{/if}}
{{!---------------------------
Recent and related articles
---------------------------}}
<footer class="row my-6{{#unless settings.show_recently_viewed_articles}}{{#unless settings.show_related_articles}} hidden{{/unless}}{{/unless}}">
{{#if settings.show_related_articles}}
{{related_articles}}
{{/if}}
{{#if settings.show_recently_viewed_articles}}
{{recent_articles}}
{{/if}}
</footer>
{{#if settings.show_article_comments}}
{{!----------------
Article comments
----------------}}
<section id="comments" itemscope itemtype="http://schema.org/UserComments">
<header class="border-top border-bottom py-2">
<h3 class="mt-4">
{{t 'comments'}}
</h3>
<div class="flex justify-content-between align-items-baseline text-gray-600">
<p>
{{t 'comments_count' count=article.comment_count}}
</p>
{{#if comments}}
{{! Sorters }}
<div class="dropdown py-2">
<button class="not-a-button dropdown-toggle" aria-haspopup="true">
{{t 'sort_by'}}
<svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 12 12">
<path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
</svg>
</button>
<span class="dropdown-menu" role="menu" aria-expanded="false">
{{#each comment_sorters}}
<a class="dropdown-item" aria-selected="{{selected}}" href="{{url}}" role="menuitem">
{{name}}
</a>
{{/each}}
</span>
</div>
{{/if}}
</div>
</header>
{{#if comments}}
{{!-------------
Comments list
-------------}}
<ul class="list-unstyled">
{{#each comments}}
<li class="comment py-5 border-bottom" id="{{anchor}}">
{{! Comment metadata }}
<div class="media mb-4">
<div class="avatar">
{{#if author.agent}}
<svg class="svg-icon absolute bottom-0 right-0 text-primary bg-white border border-white circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" aria-hidden="true">
<use xlink:href="#icon-agent" />
</svg>
{{/if}}
<img class="avatar-img" src="{{author.avatar_url}}" alt="Comment author">
</div>
<div class="media-body">
{{#link 'user_profile' class="link-implied" id=author.id title=author.name}}
{{author.name}}
{{/link}}
{{#each author.badges}}
{{#is category_slug "titles"}}
<span class="badge bg-primary text-primary-inverse py-1 pr-2 mx-2" title="{{description}}" aria-label="{{name}}">
{{#if icon_url}}
<img src="{{icon_url}}" alt="{{description}}" />
{{/if}}
{{name}}
</span>
{{/is}}
{{/each}}
{{#each author.badges}}
{{#is category_slug "achievements"}}
{{#if icon_url}}
<img width="22" height="22" src="{{icon_url}}" alt="{{name}}" title="{{name}} | {{description}}" aria-label="{{name}}" />
{{/if}}
{{/is}}
{{/each}}
<ul class="list-divider">
{{#if editor}}
<li class="text-gray-600">
{{t 'edited'}} {{date edited_at timeago=true}}
</li>
{{else}}
<li class="text-gray-600">
{{date created_at timeago=true}}
</li>
{{/if}}
</ul>
</div>
<div class="actions-comment">
{{#actions}}
<svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" stroke="currentColor" d="M13.17 3.07l-1.64.71c-.48-.4-1.03-.72-1.63-.94l-.22-1.79a.511.511 0 00-.4-.44C8.86.54 8.44.5 8 .5c-.44 0-.86.04-1.28.11-.22.04-.38.22-.4.44l-.21 1.79c-.6.22-1.15.54-1.63.94l-1.65-.71a.491.491 0 00-.58.13c-.55.65-.99 1.4-1.29 2.21-.08.21 0 .44.18.58l1.45 1.08a4.91 4.91 0 000 1.87l-1.45 1.08c-.18.13-.25.37-.18.58.3.81.74 1.55 1.28 2.2.14.17.38.22.58.13l1.65-.71c.48.4 1.03.72 1.63.94l.21 1.79c.03.22.19.4.4.44.43.07.85.11 1.29.11.44 0 .86-.04 1.28-.11.22-.04.38-.22.4-.44l.21-1.79c.6-.22 1.15-.54 1.63-.94l1.65.71c.2.09.44.04.58-.13.54-.65.98-1.39 1.28-2.2.08-.21 0-.44-.18-.57L13.4 8.95c.07-.32.1-.63.1-.95s-.03-.63-.09-.94l1.45-1.08c.18-.13.25-.37.18-.58-.3-.81-.74-1.55-1.28-2.2a.51.51 0 00-.59-.13z"/>
<circle cx="8" cy="8" r="2.5" fill="none" stroke="currentColor"/>
</svg>
{{/actions}}
</div>
</div>
{{#with ticket}}
<a href="{{url}}" target="_zendesk_lotus" class="status-label escalation-badge">
{{t 'request'}}{{id}}
</a>
{{/with}}
{{#if pending}}
<span class="badge badge-pending">
{{t 'pending_approval'}}
</span>
{{/if}}
{{! Comment content }}
<section class="content">
{{body}}
</section>
{{! Comment voting }}
<div class="button-group button-group-sm" role="group">
{{#vote 'up' class='button button-outline-primary' selected_class='is-active' role='radio'}}
<svg class="svg-icon rotate-180" xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 16 16">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M4 6.5l3.6 3.6c.2.2.5.2.7 0L12 6.5"></path>
</svg>
{{/vote}}
{{#vote 'down' class='button button-outline-primary' selected_class='is-active' role='radio'}}
<svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 16 16">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M4 6.5l3.6 3.6c.2.2.5.2.7 0L12 6.5"></path>
</svg>
{{/vote}}
</div>
{{vote 'sum' class='font-size-sm text-gray-600 ml-1'}}
</li>
{{/each}}
</ul>
{{/if}}
{{pagination}}
{{!------------
Comment form
------------}}
{{#form 'comment' class='form text-right'}}
<div class="flex mt-4">
<div class="avatar">
{{user_avatar class='avatar-img'}}
</div>
<div class="flex-1 form-field">
{{wysiwyg 'body'}}
</div>
</div>
{{input type='submit'}}
{{/form}}
<p class="text-gray-600 mt-4 font-size-md">
{{comment_callout}}
</p>
</section>
{{/if}}
</article>
{{!-----------------
Left-hand sidebar
-----------------}}
<aside class="relative flex-first lg:col lg:mr-6 lg:max-w-13{{#isnt settings.article_sidebar 'none'}} lg:border-right{{/isnt}}{{#is settings.article_sidebar 'none'}}{{~#isnt settings.table_of_contents_style 'sidebar-left'}} hidden{{/isnt}}{{/is}}">
{{#isnt settings.article_sidebar 'none'}}
{{~#is settings.article_sidebar 'articles-in-section'}}
{{!------------------------
Articles in this section
------------------------}}
<div class="border-top border-bottom lg:border-transparent mb-6 lg:mt-2" x-data="toggle({ isOpen: false })" @collapse:show.stop="open" @collapse:hide.stop="close">
{{! Heading and toggle }}
<a class="link-stretched text-inherit hover:text-inherit lg:hidden" href="#" data-toggle="collapse" data-target="#articles-in-section" aria-controls="articles-in-section" aria-expanded="false">
<svg class="fill-current pointer-events-none ml-3 lg:hidden" :class="isOpen && 'rotate-180'" width="14px" viewBox="0 0 40 20" xmlns="http://www.w3.org/2000/svg">
<path d="M20,19.5 C19.4,19.5 18.9,19.3 18.4,18.9 L1.4,4.9 C0.3,4 0.2,2.4 1.1,1.4 C2,0.3 3.6,0.2 4.6,1.1 L20,13.8 L35.5,1.1 C36.6,0.2 38.1,0.4 39,1.4 C39.9,2.5 39.7,4 38.7,4.9 L21.7,18.9 C21.1,19.3 20.5,19.5 20,19.5 Z" fill-rule="nonzero"></path>
</svg>
</a>
<div class="collapse lg:expand lg:flex-column" id="articles-in-section">
<ul class="nav nav-pills flex-column py-3 md:py-0 md:font-size-md">
{{#each section.articles}}
<li class="nav-item">
<a class="nav-link border-radius {{#is id ../article.id}}is-active{{else}}hover:underline{{/is}}" href="{{url}}">
{{title}}
</a>
</li>
{{/each}}
</ul>
{{#if section.more_articles}}
<p>
<a href="{{section.url}}">
{{t 'show_all_articles'}}
</a>
</p>
{{/if}}
</div>
</div>
{{else}}
{{!---------------
Navigation menu
---------------}}
<div{{#is settings.table_of_contents_style 'sidebar-left'}} class="-mb-6"{{/is}} data-element="navigation" data-template="{{#is settings.article_sidebar 'custom'}}sidebar-navigation{{else}}{{settings.article_sidebar}}{{/is}}"></div>
{{/is~}}
{{/isnt~}}
{{~#is settings.table_of_contents_style 'sidebar-left'}}
{{!-----------------
Table of Contents
-----------------}}
<div class="hidden lg:block sticky-top" data-element="table-of-contents" data-template="sidebar-table-of-contents" data-selector=".content h2, .content h3" data-spy="scroll" data-offset="{{#if settings.sticky_header}}{{settings.header_height}}{{else}}20px{{/if}}"></div>
{{/is~}}
</aside>
{{!------------------
Right-hand sidebar
------------------}}
<aside class="md:col md:max-w-13{{#isnt settings.table_of_contents_style 'sidebar-right'}}{{~#isnt settings.cta_style 'sidebar'}} hidden{{/isnt}}{{/isnt}}" x-data="{ tableOfContents: false }">
<div :class="{ 'sticky-top': tableOfContents }" @table-of-contents:render.camel="tableOfContents = $event.target.children.length > 0">
{{~#is settings.table_of_contents_style 'sidebar-right'}}
{{!-----------------
Table of Contents
-----------------}}
<div class="hidden lg:block sticky-top" data-element="table-of-contents" data-template="sidebar-table-of-contents" data-selector=".content h2, .content h3" data-spy="scroll" data-offset="{{#if settings.sticky_header}}{{settings.header_height}}{{else}}20px{{/if}}"></div>
{{/is~}}
{{~#is settings.cta_style 'sidebar'}}
{{~#isnt settings.cta_location 'home'}}
{{!--------------
Call-to-action
--------------}}
<div data-element="template" data-template="call-to-action"></div>
{{/isnt~}}
{{/is~}}
</div>
</aside>
</div> {{! /.row }}
</div> {{! /#page-container }}
{{~#isnt settings.cta_style 'none'}}
{{~#isnt settings.cta_style 'sidebar'}}
{{~#isnt settings.cta_location 'home'}}
{{!--------------
Call-to-action
--------------}}
<div data-element="template" data-template="call-to-action"></div>
{{/isnt~}}
{{/isnt~}}
{{/isnt~}}
<script type="text/javascript">document.documentElement.classList.add('article-page', 'article-' + {{article.id}})</script>
{{!---------------
Micro-templates
---------------}}
{{~#is settings.article_navigation_style 'standard'}}
{{!------------------
Article navigation
------------------}}
<template id="tmpl-article-navigation">
<% if (previousArticle || nextArticle) { %>
<div class="row">
<% if (previousArticle) { %>
<div class="sm:col">
<% if (previousTitle) { %>
<h4 class="mb-2"><%= previousTitle %></h4>
<% } %>
<a href="<%= previousArticle.html_url %>"><%= previousArticle.title %></a>
</div>
<% } %>
<% if (nextArticle) { %>
<div class="sm:col text-right<% if (!previousArticle) { %> sm:col-offset-6<% } %>">
<% if (nextTitle) { %>
<h4 class="mb-2"><%= nextTitle %></h4>
<% } %>
<a href="<%= nextArticle.html_url %>"><%= nextArticle.title %></a>
</div>
<% } %>
</div>
<% } %>
</template>
{{/is~}}
{{~#isnt settings.table_of_contents_style 'none'}}
{{!-----------------
Table of Contents
-----------------}}
{{~#is settings.table_of_contents_style 'simple'}}
{{! Simple }}
<template id="tmpl-table-of-contents">
<% if (items.length > 1) { %>
{{~#if settings.table_of_contents_heading}}
<h3>
{{~#if settings.use_translations}}
{{dc settings.table_of_contents_heading}}
{{else}}
{{settings.table_of_contents_heading}}
{{/if~}}
</h3>
{{/if~}}
<ol class="mb-6 list-unstyled font-size-md">
<% items.forEach(function(item) { %>
<li class="list-item">
<a href="<%= item.html_url %>">
<%= item.name %>
</a>
<%= partial('partial-table-of-contents', { items: item.children, partial: partial }) %>
</li>
<% }); %>
</ol>
<% } %>
</template>
{{/is~}}
{{~#is settings.table_of_contents_style 'boxed'}}
{{! Boxed }}
<template id="tmpl-table-of-contents">
<% if (items.length > 1) { %>
<div class="bg-gray-100 border-radius px-5 mb-5 float-right w-full md:ml-5 md:px-6 md:col-5 lg:col-6 xl:col-5">
{{~#if settings.table_of_contents_heading}}
<h3>
{{~#if settings.use_translations}}
{{dc settings.table_of_contents_heading}}
{{else}}
{{settings.table_of_contents_heading}}
{{/if~}}
</h3>
{{/if~}}
<ol class="mb-6 list-unstyled font-size-md">
<% items.forEach(function(item) { %>
<li class="list-item">
<a href="<%= item.html_url %>">
<%= item.name %>
</a>
<%= partial('partial-table-of-contents', { items: item.children, partial: partial }) %>
</li>
<% }); %>
</ol>
</div>
<% } %>
</template>
{{/is~}}
{{~#is settings.table_of_contents_style 'full-width'}}
{{! Full-width }}
<template id="tmpl-table-of-contents">
<% if (items.length > 1) { %>
<div class="border border-radius border-left-4 px-6 my-6 w-full">
{{~#if settings.table_of_contents_heading}}
<h3>
{{~#if settings.use_translations}}
{{dc settings.table_of_contents_heading}}
{{else}}
{{settings.table_of_contents_heading}}
{{/if~}}
</h3>
{{/if~}}
<ol class="mb-6 list-unstyled font-size-md">
<% items.forEach(function(item) { %>
<li class="list-item">
<a href="<%= item.html_url %>">
<%= item.name %>
</a>
<%= partial('partial-table-of-contents', { items: item.children, partial: partial }) %>
</li>
<% }); %>
</ol>
</div>
<% } %>
</template>
{{/is~}}
{{~#isnt settings.table_of_contents_style 'simple'}}
{{~#isnt settings.table_of_contents_style 'boxed'}}
{{~#isnt settings.table_of_contents_style 'full-width'}}
{{! Sidebar }}
<template id="tmpl-sidebar-table-of-contents">
<% if (items.length > 1) { %>
<div class="sticky-top{{#unless settings.sticky_header}} pt-4 -mt-4{{/unless}}"{{#if settings.sticky_header}} style="padding-top: 100px; margin-top: -50px; "{{/if}}>
<div class="div-page-toc border-radius">
<h3 class="page-toc-heading">
{{#if settings.use_translations}}
{{dc settings.table_of_contents_heading}}
{{else}}
{{settings.table_of_contents_heading}}
{{/if}}
</h3>
<ol class="nav nav-pills flex-column font-size-md">
<% items.forEach(function(item) { %>
<li class="nav-item page-toc">
<a class="nav-link page-toc border-radius" href="<%= item.html_url %>">
<%= item.name %>
</a>
</li>
<% }); %>
</ol>
</div>
</div>
<% } %>
</template>
{{/isnt}}
{{/isnt}}
{{/isnt}}
{{~#isnt settings.table_of_contents_style 'sidebar-left'}}
{{~#isnt settings.table_of_contents_style 'sidebar-right'}}
{{! Nested items list }}
<template id="tmpl-partial-table-of-contents">
<% if (items.length) { %>
<ol class="list-none mb-0">
<% items.forEach(function(item) { %>
<li class="list-item">
<a href="<%= item.html_url %>">
<%= item.name %>
</a>
<%= partial('partial-table-of-contents', { items: item.children, partial: partial }) %>
</li>
<% }); %>
</ol>
<% } %>
</template>
{{/isnt}}
{{/isnt}}
{{/isnt}}
0
Ifra Saqlain
Hi Sandy Midili,
Your TOC isn't working with the given tip because you have customized the code.
Add the given code to your script.js file, maybe TOC do the work as you want.
Please feel free if you face any issues till then I find another solution for you.
Thanks
0
Lorena Pena
Hello Ifra Saqlain, I appreciate your tip! I did upload the JS files to my assets and did the whole process, but I do not see the different headings appearing as shown on your last screenshot (TOC with bullet points depending on the type of heading).

The output I have is the following:
Any idea of why the bullet points are not displayed? Thanks in advance for your reply :)
0
Ifra Saqlain
Hey Lorena
Add CSS to your style.css file:
.toc-list ul, .toc-list ol {
list-style-type: revert;
}
.toc-list ul li, .toc-list ol li {
margin: 0px 0 0px 10px;
}
.toc-list ul li a {
border-radius: 4px;
color: $text_color;
display: block;
font-weight: 300;
padding-left: 10px;
/*margin-bottom: 10px;*/
}
.toc-list ul li a:hover {
background-color: $brand_color;
color: $brand_text_color;
text-decoration: none;
}
0
Lorena Pena
Ifra Saqlain I've added it at the end of my style.css, but it still doesn't work: https://naptasupport.zendesk.com/hc/fr/articles/18522044742813-Export-CV

0
Ifra Saqlain
Okay, so remove that CSS code and add only this line of code.
let me know if it works for you. :)
Thanks
1
Christian Espinosa
I wanted to contribute to this and provide an up to date version of the original js code without the fragility of regex, onload and var.
Best,
Christian
0
Ifra Saqlain
Hi Christian Espinosa, thanks for the new version of code. I appreciate for your contribution :)
0