Sample Table of Contents

by knoxg

HTML

<html>
<head>
<title>Sample TOC</title>
<script src="https://cdn.jsdelivr.net/gh/randomnoun/[email protected]/js/jquery.tabstops.js"></script>
</head>

<body>
<div class="paper">

<h1>Sample Table of Contents</h1>

<label>Visible tabs:</label><input type="checkbox">

<p>The tabstops in these paragraphs are set via CSS to
<code>14cm dotted right;</code>
</p>

<div class="toc2">
<p>Foreward	1</p>
<p>Introduction	3</p>
<p>Table of Contents	5</p>
<p>Prologue	7</p>
<p class="level-2">Chapter 1	9</p>
<p class="level-2">Chapter 2	109</p>
<p class="level-2">Chapter 3	357</p>
<p>Epilogue	777</p>
<p>Appendices</p>
<p class="level-2">Appendix I	1, 012</p>
<p class="level-2">Appendix II	1, 015</p>

<p>Index	1, 234</p>

</div>


</div>
</body>
</html>

CSS

.toc2 p {
  --tabstops: 14cm dotted right;
}
.toc2 p.level-2 {
    padding-left: 20px;
}

body {
  background-color: #eee;
  font-family: Calibri, Arial, sans-serif;
  font-size: 12pt;
  padding: 5px 50px;
}
.paper {
  background-color: #fff;
  border: solid 1px #ccc;
  padding: 10px;
  min-width: 23cm;
}
span.tab.visible::before {
  content: 'TAB';
  position: absolute;
  font-family: Arial, sans-serif;
  background-color: #eee;
  border: solid 1px #aaa;
  border-radius: 3px;
  font-size: 8pt;
  color: #aaa;
  padding: 2px;
}

JavaScript

$(document).ready(function() {
  // initialise tabstops
  $('p').tabstops();

  // visible tabs
  $('input[type="checkbox"]').on('input', function(e) {
    $('span.tab').toggleClass('visible', $(e.target).prop('checked'));
  });


});