diff --git a/lib/isodoc/ogc/html/scripts.html b/lib/isodoc/ogc/html/scripts.html
index e393fe4b..57195684 100644
--- a/lib/isodoc/ogc/html/scripts.html
+++ b/lib/isodoc/ogc/html/scripts.html
@@ -1,8 +1,24 @@
   <script>
-    $("#toc").on('click', 'li', function(e) {
-    $(this).parent().find('li.toc-active').removeClass('toc-active');
-    $(this).addClass('toc-active');
-});
+    //TOC generation
+      $('#toc').toc({
+          'selectors': toclevel(), //elements to use as headings
+          'container': 'main', //element to find all selectors in
+          'smoothScrolling': true, //enable or disable smooth scrolling on click
+          'prefix': 'toc', //prefix for anchor tags and class names
+          'onHighlight': function(el) {}, //called when a new section is highlighted 
+          'highlightOnScroll': true, //add class to heading that is currently in focus
+          'highlightOffset': 100, //offset to trigger the next headline
+          'anchorName': function(i, heading, prefix) { //custom function for anchor name
+              return prefix+i;
+          },
+          'headerText': function(i, heading, $heading) { //custom function building the header-item text
+              return $heading.text();
+          },
+      'itemClass': function(i, heading, $heading, prefix) { // custom function for item class
+        return $heading[0].tagName.toLowerCase();
+      }
+      });
+      
   </script>
 
 <script>
diff --git a/spec/metanorma/processor_spec.rb b/spec/metanorma/processor_spec.rb
index d1f41631..b28a27b2 100644
--- a/spec/metanorma/processor_spec.rb
+++ b/spec/metanorma/processor_spec.rb
@@ -59,7 +59,7 @@
       <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
       <p class="zzSTDTitle1"></p>
       <div id="H">
-        <h1 id="toc0">1.&#xA0; Terms and definitions</h1>
+        <h1>1.&#xA0; Terms and definitions</h1>
         <h2 class="TermNum" id="J">1.1.&#xA0;<p class="Terms" style="text-align:left;">Term2</p></h2>
       </div>
     </main>