This article introduces jQuery.toc.js, a plugin that generates a table of contents from the headings (h2–h4) in the main body of your content.
By using this plugin, you can automatically display headings (h2–h4) within blog posts or web pages as a table of contents.
This allows readers to navigate the content more easily.
In this article, we will explain the specific usage in detail.

Contents
  1. CSS Description
  2. HTML Description
  3. JavaScript Description
  4. Demo Page: Displaying a Table of Contents from Headings (h2–h4) Using jquery.toc.js
  5. Source: Table of Contents jQuery Plugin
  6. Summary

CSS Description

First, let’s start with the CSS settings for the table of contents “#toc” and the content area “class=”container””.
The table of contents should be displayed in a fixed position with a readable and stylish design.

<style>
body {
    font-size: 16px;
}
h1{
    text-align: center;
    font-size: 20px;
    line-height: 1.6em;
    padding: 20px 0;
}
p{
    padding-bottom: 20px;
}
#toc {
    background: #fefefe;
    width: 240px;
    position: fixed;
    border: 1px solid #ddd;
    color: #333;
    list-style: none;
    margin: 0;
    padding: 15px;
}
#toc a {
    color: #333;
}
#toc .toc-h2 {
    margin-left: 10px
}
#toc .toc-h3 {
    margin-left: 20px
}
#toc-visible {
    color: #000;
    font-weight: bold;
}
#toc.right {
    right: 0
}
.container{
    width: 900px;
    margin: 0 auto;
}
</style>

　
This stylesheet fixes the table of contents to the right side of the page and sets indentation for each heading level.
Please customize these styles as needed.

HTML Description

Next is the HTML setup. Specify the table of contents area “id=”toc”” and the content area “class=”container””.
Prepare headings “h2–h4” inside the table of contents area “id=”toc”” and the content area “class=”container””.

<h1>Displaying Body Headings (h2–h4) as a Table of Contents Using jquery.toc.js</h1>

<ul id="toc"></ul>

<div class="container">
  <h2>Heading h2 Title 1</h2>
  <p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
  <p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
  <h2>Heading h2 Title 2</h2>
  <p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
  <p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
  <h3>Heading h3 Title 1</h3>
  <p>text text text text text text text text text text text text text text text text text text text text text text text text</p>
</div>

JavaScript Description

Finally, load jQuery and jQuery.toc.js, and write the JavaScript code to generate the table of contents.
Load jquery.min.js (v1.7.2) and the jquery.toc.js file.
Describe $(“TOC area”).toc({content: “content area”, headings: “h2,h3,h4”}).

<script src="jquery.min.js"></script>
<script src="jquery.toc.js"></script>
<script type="text/javascript">
    $("#toc").toc({content: "div.container", headings: "h2,h3,h4"});
</script>

　
In this script, the target area for generating the table of contents and the heading elements are specified.
As a result, the table of contents is automatically generated when the page is loaded.

Demo Page: Displaying a Table of Contents from Headings (h2–h4) Using jquery.toc.js

Access the demo page from the link below to check the actual behavior.



Demo page for displaying a table of contents from headings (h2–h4) using jquery.toc.js

Source: Table of Contents jQuery Plugin

For detailed information about this plugin and additional options, please visit the following site.



Table of Contents jQuery Plugin

Summary

jQuery.toc.js is a useful plugin that allows you to easily generate a table of contents.
It is especially effective for long blog posts and technical documents, greatly improving readability and usability for readers.
Use this article as a reference and consider adding it to your own site.

　
*If you reuse this content, please do so at your own risk.
Do not reuse the Google Analytics tag included in the demo page’s head section.*

a Table of Contents jQuery.toc.js