diff --git a/lib/isodoc/iec/html/scripts.html b/lib/isodoc/iec/html/scripts.html
index 8a722060..d38812cc 100644
--- a/lib/isodoc/iec/html/scripts.html
+++ b/lib/isodoc/iec/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');
-});
+<script>
+    //TOC generation
+      $('#toc').toc({
+          //'selectors': 'h1,h2:not(.TermNum)', //elements to use as headings
+          '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 c241065c..abe9abba 100644
--- a/spec/metanorma/processor_spec.rb
+++ b/spec/metanorma/processor_spec.rb
@@ -57,7 +57,7 @@
  </p>
  <p class="zzSTDTitle1">&#xA0;</p>
  <div id="">
-   <h1 class="ForewordTitle" id="toc0">FOREWORD</h1>
+   <h1 class="ForewordTitle">FOREWORD</h1>
    <div class="boilerplate_legal"></div>
  </div>
  <p class="zzSTDTitle1">INTERNATIONAL ELECTROTECHNICAL COMMISSION</p>
@@ -67,7 +67,7 @@
    <b></b>
  </p>
  <p class="zzSTDTitle1">&#xA0;</p>
-             <div id="H"><h1 id="toc1">1&#xA0; Terms and definitions</h1>
+             <div id="H"><h1>1&#xA0; Terms and definitions</h1>
        <h2 class="TermNum" id="J">1.1</h2>
          <p class="Terms" style="text-align:left;">Term2</p>
        </div>