jquery.autoc

required

• jQuery ^3.5.0

Download

jquery.autoc.min.js

https://github.com/yoo16/jquery.autoc/tree/main/build

jQuery and Bootstrap4 (CDN)

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="jquery.autoc.min.js"></script>

Get Standard

JavaScript

$(function () {
    $.fn.aoutoc();
});

HTML

<div class="container">
    <div id="toc"></div>
</div>

<div class="container">
    <h2 class="h2">Title1</h2>
    <h3 class="h3">Sub Title1</h3>
    <div>Contents1</div>
    <h3 class="h3">Sub Title2</h3>
    <div>Contents2</div>

    <h2 class="h2">Title2</h2>
    <h3 class="h3">Sub Title1</h3>
    <div>Contents1</div>
    <h3 class="h3">Sub Title2</h3>
    <div>Contents2</div>
</div>

Introduction

Install

jquery.autoc.js is jQuery plugin for automatically TOC. Please, install build/jquery.autoc.min.js in GitHub or node_modules build/jquery-autoc-js/

Required class "h1" - "h5"

By h1 ... h5 tags and class of same name, will make TOC. Default TOC's setting is "h2" and "h3", another tags are ignored.

Bootstrap4

If you load Bootstrap 4 with a CDN etc., the default style will be reflected.

Execute

aoutoc() Method

TOC creating method is aoutoc(). Default target element is id="toc".

$.fn.aoutoc();

Custome id

$.fn.aoutoc({ id: 'my-toc' });

TOC's range

You can set the TOC's range with "start" and "end".

Only h2 tag.

$.fn.aoutoc({ id: 'toc', start: 2, end: 2, });

Only h2 - h4 tags.

$.fn.aoutoc({ id: 'toc', start: 2, end: 4, });

Custom Settings

    $(function () {
      $.fn.autoc({
        start: 2,
        end: 3,
        base: { class: ['mt-3', 'w-50'] },
        ul: { class: ['list-group', 'mb-5'] },
        li: {
          class: ['list-group-item'],
        },
        level: {
          3: {
            css: { paddingLeft: '80px' }
          }
        },
        title: {
          label: 'Title Index'
        },
        a: {
          class: ['text-danger']
        }
      });
    });