Automatically Adding a Table of Contents on Website | Toctoc

Toctoc is a jQuery plugin to automatically adds a table of contents to a webpage. A small jQuery TOC plugin that makes it easy to navigate a long webpage via a customizable table of contents and is SEO friendly.

The plug-in creates a collapsible table of contents box containing the anchor list where the ID and Href are generated from all heading elements within the document.

🤔 About

Tools

🐙 Github 💻 VS Code 🧰 jQuery

Languages

🟠 HTML 🔵 CSS 🟡 JavaScript

Must Read – How to Create a Hierarchical Table of Contents in Javascript Plugin | Easy-TOC

How to make use of it:

1. Load the stylesheet toctoc.css for the default model of the table of contents.

<link rel="stylesheet" href="toctoc.css" />

2. Create an empty container by which the TOC field can be positioned.

<div id="toctoc"></div>

3. Load the jQuery JavaScript library and the jQuery toctoc.js plugin.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/toctoc.js"></script>

4. Initialize the plugin to generate a primary table of contents.

$(function(){
  $.toctoc();
});

5. Customize the looks of the table of contents.

$.toctoc({
  headBackgroundColor: '#1c1c1c',
  headTextColor: '#fff',
  headLinkColor: '#add8e6',
  bodyBackgroundColor: '#f5f5f5',
  bodyLinkColor: '#000',
  borderStyle: 'solid',
  borderColor: '#000',
  borderWidth: '2px'
});

6. Customize the title of the TOC field.

$.toctoc({
  headText: 'Table of contents'
});

7. Customize the present/cover labels.

$.toctoc({
  headLinkText: ['show', 'hide']
});

8. Determine whether or not to collapse the TOC field on the web page load.

$.toctoc({
  minimized: false
});

9. Determine the container by which the plugin appears for heading parts.

$.toctoc({
  target: 'article'
});

Must Read – Selects The Text Contents of Inputs, Textareas, and Contenteditable Elements On Focus


 

OptionDescriptionTypeDefault
headBackgroundColorThis is the background color of the table of contents headerString – CSS color“#1c1c1c”
headTextColorThis is the text color of the table of contents headerString – CSS color“#fff”
headLinkColorThis is the link color of the table of contents headerString – CSS color“#add8e6”
bodyBackgroundColorThis is the background color of the table of contents bodyString – CSS color“#f5f5f5”
bodyLinkColorThis is the links color of the table of contents bodyString – CSS color“#000”
borderStyleThis is the border style of the table of contents containerString – CSS border-style“solid”
borderColorThis is the border color of the table of contents containerString – CSS border-color“#000”
borderWidthThis is the border width of the table of contents containerString – CSS border-width“2px”

Read More –

Jquery UI Sort Plugin For Easy Sortable Tree-Type Structure | treeSortable
[table of contents] A Lightweight jQuery Plugin for Creating a Dynamic Menu


See Demo And Download

Official Website(ThibaudArros): Click Here

This superior jQuery/javascript plugin is developed by ThibaudArros. For extra Advanced Usage, please go to the official website.

Share